根据动态值选择和取消选择复选框
select and deselect check box on basis of dynamic value.
我在输入类型复选框中列出了if类和节。所有的值classes和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>
这样尝试:请参阅演示
HTML代码:
<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);
}
});
相关文章:
- 如何创建只允许用户在选中前一个复选框的情况下选择复选框的复选框验证
- 禁用选择/复选框 当选择/选中另一个时
- 如何使用JQuery按值选择复选框
- jquery选择复选框选择的值
- 取消选中时选择最接近的“从中选择”复选框
- 根据动态值选择和取消选择复选框
- 选择/取消选择复选框,该复选框未按预期使用.coneast('table').find('tbo
- 背景图像切换和隐藏选择复选框
- 如何通过选择复选框和下拉列表用Javascript更改标签值
- 选择复选框的Javascript
- 如何将选择复选框值动态传递给 ajax 调用变量动态发布到 php 变量
- 获取多个选择复选框的值 Javascript
- 翡翠,如果其他速记选择复选框
- jQuery动态选择复选框组onChange
- 按住Shift键并单击以选择复选框范围
- 选中p中的所有复选框:选择复选框菜单
- 选择复选框时显示数据
- 从多个JSON文件中选择复选框时切换标记
- 如何为第一次选择和第二次选择复选框应用不同的颜色
- 如何在HTML中选择复选框时创建弹出窗口