jQuery监听 全选checkbox

jQuery监听 全选checkbox

实现原理

1. 通过jQuery监听，监听指定结构下的元素单击事件。

   $('div label input:checkbox').on('click', function() {..})

    

2. 接收到监听事件后，保存单击的全选/全不选状态。

   var that = this

    

3. 通过jQuery选择器，选择同组的checkbox

   var parents = $(this).parents('.whiteboard')[0];
   $(parents).find('div>label>input:checkbox');

    

4. 对同组所有checkbox赋值

   this.checked = that.checked;

   ---

    

DOM

<div class="whiteboard">
    <div class="headline" style="text-align: left;">基本信息
        <label>
            <input id="selectAll1" name="selectAll" type="checkbox" class="ace" value="1">
            <span class="lbl"> 全选 </span>
        </label>
    </div>
    <div class="control-group" id="subjectRadio1" style="">
        <div class="radio" style="float:left">
            <label>
                <input name="form-field-checkbox" type="checkbox" class="ace" value="1">
                <span class="lbl"> 姓名 </span>
            </label>
        </div>
        <div class="radio" style="float:left">
            <label>
                <input name="form-field-checkbox" type="checkbox" class="ace" value="2">
                <span class="lbl"> 身份证号码 </span>
            </label>
        </div>
        <div class="radio" style="float:left">
            <label>
                <input name="form-field-checkbox" type="checkbox" class="ace" value="3">
                <span class="lbl"> 户籍所在地 </span>
            </label>
        </div>
        <div class="radio" style="float:left">
            <label>
                <input name="form-field-checkbox" type="checkbox" class="ace" value="4">
                <span class="lbl"> 户籍所在街道 </span>
            </label>
        </div>
        <div class="radio" style="float:left">
            <label>
                <input name="form-field-checkbox" type="checkbox" class="ace" value="5">
                <span class="lbl"> 联系方式 </span>
            </label>
        </div>
        <div class="radio" style="float:left">
            <label>
                <input name="form-field-checkbox" type="checkbox" class="ace" value="6">
                <span class="lbl"> 监护人 </span>
            </label>
        </div>
    </div>
</div>
<div class="whiteboard">
    <div class="headline" style="text-align: left;">评估信息
        <label>
            <input id="selectAll2" name="selectAll" type="checkbox" class="ace" value="1">
            <span class="lbl"> 全选 </span>
        </label>
    </div>
    <div class="control-group" id="subjectRadio2" style="">
        <div class="radio" style="float:left">
            <label>
                <input name="form-field-checkbox2" type="checkbox" class="ace" value="21">
                <span class="lbl"> 评估日期 </span>
            </label>
        </div>
        <div class="radio" style="float:left">
            <label>
                <input name="form-field-checkbox2" type="checkbox" class="ace" value="22">
                <span class="lbl"> 评估等级 </span>
            </label>
        </div>
        <div class="radio" style="float:left">
            <label>
                <input name="form-field-checkbox2" type="checkbox" class="ace" value="23">
                <span class="lbl"> 经济状况 </span>
            </label>
        </div>
        <div class="radio" style="float:left">
            <label>
                <input name="form-field-checkbox2" type="checkbox" class="ace" value="24">
                <span class="lbl"> 享受服务类型 </span>
            </label>
        </div>
    </div>
</div>

 

JS

$('div label input:checkbox[name="selectAll"]').on('click', function() {
    var that = this;
    var parents = $(this).parents('.whiteboard')[0];
    $(parents).find('div>label>input:checkbox').each(function(){
        this.checked = that.checked;
    })
})；

 

参考

http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

http://www.w3school.com.cn/jquery/jquery_selectors.asp

http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp

https://www.cnblogs.com/liaojie970/p/6386646.html