Question

我列出了输入类型中的类和节复选框。所有值类和id都是动态的。如何调用我选择并取消选中所有复选框，如

如果我选择“Class One”，其所有部分都会被选中

<table class="table table-striped table-bordered table-hover dataTable no-footer">
<thead>
<tr>
<th class="col-lg-2">#</th>
<th class="col-lg-2">Classes</th>
<th class="col-lg-2">Sections</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="#">
1                                                            </td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="One" type="checkbox" value="">One                                                                </label>
</td>
<td data-title="">


<label class="checkbox-inline"><input class="One" type="checkbox" name="secid[]" value="1">A</label>

<label class="checkbox-inline"><input class="One" type="checkbox" name="secid[]" value="2">B</label>
</td>
</tr>
<tr>
<td data-title="#">
2                                                            
</td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="Two" type="checkbox" value="">Two                                                                
</label>
</td>
<td data-title="">


<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="5">A</label>

<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="6">B</label>

<label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="7">C</label>
</td>
</tr>
<tr>
<td data-title="#">
3                                                            
</td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="Three" type="checkbox" value="">Three                                                                
</label>
</td>
<td data-title="">


<label class="checkbox-inline"><input class="Three" type="checkbox" name="secid[]" value="8">A</label>
</td>
</tr>
<tr>
<td data-title="#">
4                                                            
</td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="Four" type="checkbox" value="">Four                                                                
</label>
</td>
<td data-title="">


<label class="checkbox-inline"><input class="Four" type="checkbox" name="secid[]" value="9">A</label>
</td>
</tr>
<tr>
<td data-title="#">
5                                                            
</td>
<td data-title="">
<label class="checkbox-inline"><input onclick="checkallsection(this.id)" id="Five" type="checkbox" value="">Five                                                                
</label>
</td>
<td data-title="">


<label class="checkbox-inline"><input class="Five" type="checkbox" name="secid[]" value="10">A</label>

<label class="checkbox-inline"><input class="Five" type="checkbox" name="secid[]" value="11">B</label>
</td>
</tr>


</tbody>
</table>

Answer 1

尝试这样：See Demo Here

HTML code：

<table class="table table-striped table-bordered table-hover dataTable no-footer">
    <thead>
        <tr>
            <th class="col-lg-2">#</th>
            <th class="col-lg-2">Classes</th>
            <th class="col-lg-2">Sections</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-title="#">
                1                                                            
            </td>
            <td data-title="">
                <label class="checkbox-inline"><input class="cls" id="One" type="checkbox" value="">One                                                                </label>
            </td>
            <td data-title="">
                <label class="checkbox-inline"><input class="One" type="checkbox" name="secid[]" value="1">A</label>
                <label class="checkbox-inline"><input class="One" type="checkbox" name="secid[]" value="2">B</label>
            </td>
        </tr>
        <tr>
            <td data-title="#">
                2                                                            
            </td>
            <td data-title="">
                <label class="checkbox-inline"><input class="cls" id="Two" type="checkbox" value="">Two                                                                
                </label>
            </td>
            <td data-title="">
                <label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="5">A</label>
                <label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="6">B</label>
                <label class="checkbox-inline"><input class="Two" type="checkbox" name="secid[]" value="7">C</label>
            </td>
        </tr>
        <tr>
            <td data-title="#">
                3                                                            
            </td>
            <td data-title="">
                <label class="checkbox-inline"><input class="cls" id="Three" type="checkbox" value="">Three                                                                
                </label>
            </td>
            <td data-title="">
                <label class="checkbox-inline"><input class="Three" type="checkbox" name="secid[]" value="8">A</label>
            </td>
        </tr>
        <tr>
            <td data-title="#">
                4                                                            
            </td>
            <td data-title="">
                <label class="checkbox-inline"><input class="cls" id="Four" type="checkbox" value="">Four                                                                
                </label>
            </td>
            <td data-title="">
                <label class="checkbox-inline"><input class="Four" type="checkbox" name="secid[]" value="9">A</label>
            </td>
        </tr>
        <tr>
            <td data-title="#">
                5    
            </td>
            <td data-title="">
                <label class="checkbox-inline"><input class="cls" id="Five" type="checkbox" value="">Five                                                                
                </label>
            </td>
            <td data-title="">
                <label class="checkbox-inline"><input class="Five" type="checkbox" name="secid[]" value="10">A</label>
                <label class="checkbox-inline"><input class="Five" type="checkbox" name="secid[]" value="11">B</label>
            </td>
        </tr>
    </tbody>
</table>

JS代码：

$(document).on('click', '.cls', function() {    

if($(this).parents('td').next("td").find('input').is(':checked')) {
    $(this).parents('td').next("td").find('input').prop('checked', false);
} else {  
   $(this).parents('td').next("td").find('input').prop('checked', true);
}

});

选中并取消选中基于动态值的复选框。

1 个答案: