javascript 选中的checkbox

最新推荐文章于 2024-04-03 09:18:57 发布

原创最新推荐文章于 2024-04-03 09:18:57 发布 · 894 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

41 篇文章

订阅专栏

本文介绍了如何使用JavaScript/jQuery操作页面上的Checkbox元素，包括检查选中状态、设置选中状态、统计选中数量等实用技巧。

<script>
        //方法1
        $("#b1").click(function(){
            //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
            //意思是选择被选中的checkbox
            $.each($('input:checkbox:checked'),function(){
                window.alert("你选了："+
                    $('input[type=checkbox]:checked').length+"个，其中有："+$(this).val());
            });
        });

        //方法2
        $("#b2").click(function(){
            $.each($('input:checkbox'),function(){
                if(this.checked){
                    window.alert("你选了："+
                        $('input[type=checkbox]:checked').length+"个，其中有："+$(this).val());
                }
            });
        });
</script>

2、检查当前点击是否选中：即选中还是取消

$('.pageContent').delegate('#b2','click',function() {
        var chechVal = $(this).attr('checked');
        console.log(chechVal);
    });

checked == 选中
undefined == 取消选中

3、附加选中和取消选中

.attr("checked",true);
.attr("checked",false);

4、查询列表中checkbox选中的个数

var trCheckedLength = tbodyObj.find('tr input[type=checkbox]:checked').length;

//循环选中的tr
tbodyObj.find('tr input[type=checkbox]:checked').each(function(i,e){
    console.log(i);
});