JavaScript 实现复选框的全选与反选操作
原创JavaScript 实现复选框的全选与反选操作
原创
Mandy的名字被占用了
修改于 2020-12-14 11:06:15
修改于 2020-12-14 11:06:15
jQuery 实现复选框多选
页面代码
<!DOCTYPE html>
<html>
<head>
<title>全选和反选</title>
</head>
<body>
<input type="checkbox" name="chkFirst" /><br />
<input type="checkbox" name="chkSec" />
<input type="checkbox" name="chkSec" />
<input type="checkbox" name="chkSec" />
<input type="checkbox" name="chkSec" />
<input type="checkbox" name="chkSec" />
<input type="checkbox" name="chkSec" />
<input type="checkbox" name="chkSec" />
</body>
</html>jQuery 代码,自行加载一个 jQuery 到该页面中
var chkFirst = $('input[name="chkFirst"]');
var chkSec = $('input[name="chkSec"]');
chkFirst.click(function() {
// 这里的prop代替attr是因为prop可循环执行，而attr只能执行一次
// is函数判断对象属性，反坏true和false
chkSec.prop("checked", $(this).is(":checked"));
});
var len = chkSec.length;
chkSec.click(function() {
// 在这里也不能用attr
chkFirst.prop(
"checked",
$('input[name="chkSec"]:checked').length == len ? true : false
);
});JavaScript 实现复选框多选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>全选、反选</title>
</head>
<body>
<form>
<input
type="checkbox"
name=""
id="all"
onclick="selectAll();"
/>全选<br />
<hr />
<br />
<input
class="chk"
type="checkbox"
name="chk"
onclick="selectSingle();"
/>菜单一<br /><br />
<input
class="chk"
type="checkbox"
name="chk"
onclick="selectSingle();"
/>菜单二<br /><br />
<input
class="chk"
type="checkbox"
name="chk"
onclick="selectSingle();"
/>菜单三<br /><br />
<input
class="chk"
type="checkbox"
name="chk"
onclick="selectSingle();"
/>菜单四<br /><br />
</form>
</body>
</html><script type="text/javascript" >
var dom=document.getElementById('all');
var doms=document.getElementsByName('chk');
function selectAll(){
var len = doms.length;
for(var i=0;i<len;i++){
if(dom.checked){
doms[i].checked=true;
}else{
doms[i].checked=false;
}}};
function selectSingle(){
let len = 0;
let count = doms.length;
for(var i=0;i<count;i++){
if(doms[i].checked==true){
len++;
}}
if (count == len) {
dom.checked = true;
}else{
dom.checked = false;
}}
</script>原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录