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