关于全选和全部选及个别操作

来源：互联网发布：c语言某一位取反编辑：程序博客网时间：2024/06/08 12:02

<body>    <label for="nice1" class="labels"><input type="checkbox" id="nice1" name="nice" class="hello">选项一</label>    <label for="nice2" class="labels"><input type="checkbox" id="nice2" name="nice" class="hello">选项二</label>    <label for="nice3" class="labels"><input type="checkbox" id="nice3" name="nice" class="hello">选项三</label>    <label for="nice4" class="labels"><input type="checkbox" id="nice4" name="nice" class="hello">选项四</label>    <label for="nice5" class="labels"><input type="checkbox" id="nice5" name="nice" class="hello">选项五</label>    <label for="nice6" class="labels"><input type="checkbox" id="nice6" name="nice" class="hello">选项六</label>    <label for="nice7" class="labels"><input type="checkbox" id="nice7" name="nice" class="hello">选项七</label>    <label for="nice8" class="labels"><input type="checkbox" id="nice8" name="nice" class="hello">选项八</label>    <label for="nice9" class="labels"><input type="checkbox" id="nice9" name="nice" class="hello">选项九</label>    <label for="nice10" class="labels"><input type="checkbox" id="nice10" name="nice" class="hello">选项十</label>    <label for="all_c" class="all"><input type="checkbox" id="all_c" class="all_c">全选</label><script>    $(function(){        $('.hello').click(function(){            var cel=document.querySelectorAll('input[name="nice"]:checked');            console.log(cel.length);            if(cel.length==$('.hello').length){                $('.all_c').prop('checked',true);            }else{                $('.all_c').prop('checked',false);            }        });        $('.all_c').click(function(){            if($(this).is(":checked")){                $('.hello').prop('checked',true);            }else{                $('.hello').prop('checked',false);            }        });    })</script>

发现这个querySelectorAll()挺好用的，但是好像兼容不是很好，不过可以学习一下。

阅读全文

0 0