JQuery to get checkbox checkbox and other operations and considerations
- 2020-03-29 23:57:26
- OfStack
2. Unselect all checkbox options
Checkbox code snippet for testing:
<div>
<input type="checkbox" name="abc" value=" In grade one " id="in1" checked="checked" /><label for="in1"> In grade one </label>
<input type="checkbox" name="abc" value=" Second grade " id="in2" /><label for="in2"> Second grade </label>
<input type="checkbox" name="abc" value=" The third grade " id="in3" /><label for="in3"> The third grade </label>
<input type="checkbox" name="abc" value=" In fourth grade " id="in4" /><label for="in4"> In fourth grade </label>
<input type="checkbox" name="abc" value=" The fifth grade " id="in5" /><label for="in5"> The fifth grade </label>
<input type="checkbox" name="abc" value=" The sixth grade " id="in6" /><label for="in6"> The sixth grade </label>
<input type="checkbox" name="abc" value=" Grade seven " id="in7" /><label for="in7"> Grade seven </label>
<input type="checkbox" name="abc" value=" The eighth grade " id="in8" /><label for="in8"> The eighth grade </label>
</div>
First, get the checkbox checked. Most of the methods found online use each to get:
$("input[name='checkbox'][checked]").each(function () {
alert(this.value);
})
IE under the test effect (my IE10) :
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201311/2013112422445816.jpg ">
IE10 under the effect:
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201311/2013112422445817.jpg ">
Chrome:
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201311/2013112422445818.jpg ">
A Google search revealed why:
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201311/2013112422445819.jpg ">
Address: (link: http://bbs.csdn.net/topics/380003991)
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201311/2013112422445820.jpg ">
Since the jquery version I used is 1.7.2, I have to get it checked. The modified code is:
//Get the selected item
$('#huoqu2').click(function () {
$('#show').html("");
$("input[name='abc']:checked").each(function () {
//alert(this.value);
$('#show').append(this.value + " ");
});
});
Chrome:
< img Alt = "" border = 0 SRC =" / / files.jb51.net/file_images/article/201311/2013112422445821.jpg ">
2. Select and unselect operation of checkbox:
Since these two are relatively simple, I will directly on the code:
//Select all/cancel all
$('#quanxuan').toggle(function () {
$("input[name='abc']").attr("checked", 'true');
}, function () {
$("input[name='abc']").removeAttr("checked");
});
// The selected
$('#fanxuan').click(function () {
$("input[name='abc']").each(function () {
if ($(this).attr("checked")) {
$(this).removeAttr("checked");
} else {
$(this).attr("checked", 'true');
}
});
});
To summarize:
Before jquery version 1.3, get the checkbox checked:
$("input[name='abc'][checked]").each(function () {
alert(this.value);
});
Jquery version after 1.3 to get the checkbox checked:
$("input[name='abc']:checked").each(function () {
alert(this.value);
});
Attached is the complete test Demo code:
<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 () {
//Get selected (invalid under FF and 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 + " ");
});
});
//Get the selected item
$('#huoqu2').click(function () {
$('#show').html("");
$("input[name='abc']:checked").each(function () {
//alert(this.value);
$('#show').append(this.value + " ");
});
});
//Select all/cancel all
$('#quanxuan').toggle(function () {
$("input[name='abc']").attr("checked", 'true');
}, function () {
$("input[name='abc']").removeAttr("checked");
});
// The selected
$('#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=" In grade one " id="in1" checked="checked" /><label for="in1"> In grade one </label>
<input type="checkbox" name="abc" value=" Second grade " id="in2" /><label for="in2"> Second grade </label>
<input type="checkbox" name="abc" value=" The third grade " id="in3" /><label for="in3"> The third grade </label>
<input type="checkbox" name="abc" value=" In fourth grade " id="in4" /><label for="in4"> In fourth grade </label>
<input type="checkbox" name="abc" value=" The fifth grade " id="in5" /><label for="in5"> The fifth grade </label>
<input type="checkbox" name="abc" value=" The sixth grade " id="in6" /><label for="in6"> The sixth grade </label>
<input type="checkbox" name="abc" value=" Grade seven " id="in7" /><label for="in7"> Grade seven </label>
<input type="checkbox" name="abc" value=" The eighth grade " id="in8" /><label for="in8"> The eighth grade </label>
</div>
<br />
<input type="button" id="huoqu" value="Get the selected item ( FF and chrome The invalid) " />
<input type="button" id="quanxuan" value="Select all/cancel all" />
<input type="button" id="fanxuan" value=" The selected " />
<input type="button" id="huoqu2" value="Get the selected item" />
<br />
The selected item: <div id="show">
</div>
</form>
</body>
</html>
Author: cool kids