Home > Web Front-end > JS Tutorial > Implementation code of jQuery operation input type=checkbox

Implementation code of jQuery operation input type=checkbox

高洛峰
Release: 2017-02-11 17:20:00
Original
1771 people have browsed it

<input type="checkbox">: 
2012欧洲杯"死亡之组"小组出线的国家队是:<br> 
<input type="checkbox" name="nation" value="Germany">德国 
<input type="checkbox" name="nation" value="Denmark">丹麦 
<input type="checkbox" name="nation" value="Holland">荷兰 
<input type="checkbox" name="nation" value="Portugal">葡萄牙
Copy after login

 1. The first and second place in the group qualify, so we have to limit ourselves to two choices.

var len = $("input[name=&#39;nation&#39;]:checked").length; 
if(len==0) { 
alert("请选择出线的国家队!"); 
return false; 
}else if(len<2) { 
alert("请选择两个国家队!"); 
return false; 
}else if(len>2) { 
alert("只能选择两个国家队!"); 
return false; 
}else { 
return true; 
}
Copy after login

 2. Traverse the selected national teams.

$("input[name=&#39;nation&#39;]:checked").each(function(){ 
alert("已选择的国家队: "+$(this).val()); 
});
Copy after login

 3. Cancel all selected national teams.

$("input[name=&#39;nation&#39;]:checked").attr("checked",false);
Copy after login

 4. Designate two national teams.

$("input[name=&#39;nation&#39;][value=&#39;Germany&#39;]").attr("checked",true); 
$("input[name=&#39;nation&#39;][value=&#39;Holland&#39;]").attr("checked",true);
Copy after login

 5. It is forbidden to choose the national team.

$("input[name=&#39;nation&#39;]").attr("disabled",true);
Copy after login

 6. Allowed to choose the national team.

$("input[name=&#39;nation&#39;]").attr("disabled",false);
Copy after login

 7. Select the national team whose index is even or odd (the index starts from 0).

//选中索引为偶数的国家队 
$("input[name=&#39;nation&#39;]:even").attr("checked",true); 
//选中索引为奇数的国家队 
$("input[name=&#39;nation&#39;]:odd").attr("checked",true);
Copy after login

For more jQuery operation input type=checkbox implementation code related articles, please pay attention to the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template