jquery 实现全选功能

2020-02-10  本文已影响0人  shadow123

html 代码如下:

// html
<div class="check">
    <label><input type="checkbox" name="all" onchange="selectAll(this)">全选</label>
  <label>
    <input type="checkbox" value="" name="check_1" class="check_input" onchange="change(this)">1</label>
    <label>
    <input type="checkbox" value="" name="check_2"
         class="check_input"onchange="change(this)">2</label>
    <label>
    <input type="checkbox" value="" name="check_3" class="check_input" onchange="change(this)">3</label>
</div>
function selectAll(obj){
    if($(obj).is(':checked')) {
         $(obj).parents('.check').find("input[name^=check_]").prop("checked","true");
    }else{
        $(obj).parents('.check').find("input[name^=check_]").removeAttr("checked")
    }
}
function change(bom) {
    if($(bom).is(":checked")){
        if($('input[name^=check_]:checked').length == $('.check_input').length){
            $('.check input[name=all]').prop("checked","true");
        }else{
            $('.check input[name=all]').removeAttr("checked");
        }
    }else{
        $('.check input[name=all]').removeAttr("checked");
    }
}
上一篇 下一篇

猜你喜欢

热点阅读