Today, when working on a project function, it is necessary to display the checkbox option for the user to choose. Since the front end is not very proficient, I made a simple demo. I encountered some small problems, and I will record them, hoping to help them encounter similar problems. students.
1. Get the selected item of checkbox
2. Select all checkbox options and reverse selection operations
Checkbox snippet for testing:
<div> < input type ="checkbox" name ="abc" value ="first grade" id ="in1" checked = " checked" / >< label for ="in1" > first grade </ label > < input type ="checkbox" name ="abc" value = "Second Grade" id ="in2" />< label for ="in2" > Second Grade </label> < ai=43><input type="checkbox" name ="abc" value = "third grade" id ="in3" />< label for = " in3" > third grade</label> < input type ="checkbox" name = "abc" value ="fourth grade" id ="in4" / >< label for ="in4" > Fourth grade </label> < input type ="checkbox" name ="abc" value = "Fifth grade" id <ai=42>="in5" />< label for ="in5" > Fifth grade </label> < input type = "checkbox" name ="abc" value = "sixth grade" id = "in6" />< label for ="in6" > sixth grade</label> < input type = " checkbox" name = "abc" value ="seventh grade" id = "in7" />< label for ="in7" > seventh grade </label> < input type <ai=44>="checkbox" name ="abc" value ="eighth grade" id = " in8 " / > < label for = "in8" > eighth grade </label> </div>
One: First of all, let's talk about the first point, get the selected item of the checkbox. Most of the methods found on the Internet use each to obtain:
$("input[name='checkbox'][checked]").each(function () {
alert(this.value);
})
But I encountered a problem during the test. This method can be obtained under IE, but the current selected item cannot be obtained under firefox and chrome browsers. The test results are as follows:
Test results under IE (mine is IE10):
The effect under IE10:
The effect under the chrome browser:
By searching on google, I found the reason:
URL: How many input CheckBoxes are selected in Jquery, IE is normal, FF and Chrome cannot get the value
Because the jquery version I use is 1.7.2, so here I have to use: checked to get it, the modified code:
//获取选中项 $('#huoqu2').click(function () { $('#show').html(""); $("input[name='abc']:checked").each(function () { //alert(this.value); $('#show').append(this.value + " "); }); });
在chrome下的效果：
二：checkbox的全选 反选操作：
由于这两个比较简单，我就直接上代码吧：
//全选/取消全选 $('#quanxuan').toggle(function () { $("input[name='abc']").attr("checked", 'true'); }, function () { $("input[name='abc']").removeAttr("checked"); }); //反选 $('#fanxuan').click(function () { $("input[name='abc']").each(function () { if ($(this).attr("checked")) { $(this).removeAttr("checked"); } else { $(this).attr("checked", 'true'); } }); });
再总结一下：
jquery版本在1.3之前时，获取checkbox的选中项的操作：
$("input[name='abc'][checked]").each(function () {
alert(this.value);
});
jquery版本在1.3之后时，获取checkbox的选中项的操作：
$("input[name='abc']:checked").each(function () {
alert(this.value);
});
附 完整测试Demo代码：
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.7.2.min.js"></script> <script> $(function () { //获取选中项(FF和chrome下无效) $('#huoqu').click(function () { //$("input[name='abc'][checked]").each(function () { // alert(this.value); //}); $('#show').html(""); $("input[name='abc'][checked]").each(function () { //alert(this.value); $('#show').append(this.value + " "); }); }); //获取选中项 $('#huoqu2').click(function () { $('#show').html(""); $("input[name='abc']:checked").each(function () { //alert(this.value); $('#show').append(this.value + " "); }); }); //全选/取消全选 $('#quanxuan').toggle(function () { $("input[name='abc']").attr("checked", 'true'); }, function () { $("input[name='abc']").removeAttr("checked"); }); //反选 $('#fanxuan').click(function () { $("input[name='abc']").each(function () { if ($(this).attr("checked")) { $(this).removeAttr("checked"); } else { $(this).attr("checked", 'true'); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <input type="checkbox" name="abc" value="一年级" id="in1" checked="checked" /><label for="in1">一年级</label> <input type="checkbox" name="abc" value="二年级" id="in2" /><label for="in2">二年级</label> <input type="checkbox" name="abc" value="三年级" id="in3" /><label for="in3">三年级</label> <input type="checkbox" name="abc" value="四年级" id="in4" /><label for="in4">四年级</label> <input type="checkbox" name="abc" value="五年级" id="in5" /><label for="in5">五年级</label> <input type="checkbox" name="abc" value="六年级" id="in6" /><label for="in6">六年级</label> <input type="checkbox" name="abc" value="七年级" id="in7" /><label for="in7">七年级</label> <input type="checkbox" name="abc" value="八年级" id="in8" /><label for="in8">八年级</label> </div> <br /> <input type="button" id="huoqu" value="获取选中项（FF和chrome下无效）" /> <input type="button" id="quanxuan" value="全选/取消全选" /> <input type="button" id="fanxuan" value="Invert selection" /> < input type ="button" id ="huoqu2" value ="Get selected item" /> < br /> Selected item: < div id = "show" > </ div > </ form > </body> </html> _ _ _ _