jq点击全选/全不选/反选效果

案例1:全选+全不选+反选

html:

<form>
    你爱好的运动是? <br><br>
    <input type="checkbox" name="items" value="足球"> 足球
    <input type="checkbox" name="items" value="篮球"> 篮球
    <input type="checkbox" name="items" value="羽毛球"> 羽毛球
    <input type="checkbox" name="items" value="兵兵球"> 兵兵球
    <br><br>
    <input type="button" id="CheckedAll" value="全 选">
    <input type="button" id="CheckedNo" value="全不选">
    <input type="button" id="CheckedRev" value="反 选">
    <input type="button" id="send" value="提交">
</form>

js:

//全选
        $("#CheckedAll").click(function () {
            $('[name=items]:checkbox').attr('checked', true);
        })
        //全不选
        $("#CheckedNo").click(function () {
            $('[name=items]:checkbox').attr('checked', false);
        })
        //反选
        $("#CheckedRev").click(function () {
            $('[name=items]:checkbox ').each(function () {
//                $(this).attr("checked", !$(this).attr("checked"));
                this.checked = !this.checked;
            })
        })
        //提交
        $("#send").click(function () {
           var str="你选中的是:\r\n";
           $('[name=items]:checkbox:checked').each(function () {
               str +=$(this).val()+'\r\n';
           });
            console.log(str);
        })

效果:

案例2:全选/全不选+单选

html:

<form>
    你爱好的运动是?
    <input type="checkbox" id="CheckedAll"> 全选/全不选<br><br>
    <input type="checkbox" name="items" value="足球"> 足球
    <input type="checkbox" name="items" value="篮球"> 篮球
    <input type="checkbox" name="items" value="羽毛球"> 羽毛球
    <input type="checkbox" name="items" value="兵兵球"> 兵兵球
    <br><br>
    <input type="button" id="send" value="提交">
</form>

js:

//全选
$("#CheckedAll").click(function () {
    /*if(this.checked){
     $('[name=items]:checkbox').attr('checked', true);
     }else {
     $('[name=items]:checkbox').attr('checked', false);
     }*/
    //或者
    $('[name=items]:checkbox').attr('checked', this.checked);
})
//选框单选(如果有其中一个没选中就取消全选)
$('[name=items]:checkbox').click(function () {
   /* var flag = true;
    $('[name=items]:checkbox').each(function () {
        if (!this.checked) {
            flag = false;
        }
    })
    $('#CheckedAll').attr('checked', flag);*/
   //等于下面
    var $tmp=$('[name=items]:checkbox');
    $('#CheckedAll').attr('checked',$tmp.length==$tmp.filter(':checked').length);
})

//提交
$("#send").click(function () {
    var str = "你选中的是:\r\n";
    $('[name=items]:checkbox:checked').each(function () {
        str += $(this).val() + '\r\n';
    });
    console.log(str);
})

效果:

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/627

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！