如果选中复选框D并且取消选中其他复选框,我想选中复选框K和F,同样,如果选中复选框I,则选择I的前一个chekbox,取消选中以下复选框。 我的HTML代码是:
<td><input type="checkbox" class= "knitting" name="knitting[]" value="1">K</td>
<td><input type="checkbox" class= "fmending" name="fmending[]" value="1">F</td>
<td><input type="checkbox" class= "dyeing" name="dyeing[]" value="1">D</td>
<td><input type="checkbox" class = "firon" name="firon[]" value="1">Y</td>
<td><input type="checkbox" class= "linking" name="linking[]" value="1">L</td>
<td><input type="checkbox" class="smending" name="smending[]" value="1">S</td>
<td><input type="checkbox" class="siron" name="siron[]" value="1">I</td>
<td><input type="checkbox" class="packing" name="packing[]" value="1">P</td>
<td><input type="checkbox" class="data" name="data[]" value="1">D</td>
<td><input type="checkbox" class="chalan" name="chalan[]" value="1">C</td>
我为此所做的是:
$(".dyeing").click(function () {
$(".knitting").prop("checked", true);
$(".fmending").prop("checked", true);
$(".firon").prop("checked", false);
$(".linking").prop("checked", false);
$(".smending").prop("checked", false);
$(".siron").prop("checked", false);
$(".packing").prop("checked", false);
$(".data").prop("checked", false);
$(".chalan").prop("checked", false);
});
这看起来很乱,还有另一个很酷的过程???
答案 0 :(得分:2)
$(":checkbox").on('change',function () {
var idx=$(this).index();
$(":checkbox:lt("+idx+")").prop('checked',true);
$(":checkbox:gt("+idx+")").prop('checked',false);
});
检查以下代码段
var idx = 0;
var chk = $('table tr :checkbox');
$("table tr :checkbox").on('change', function() {
var index = chk.index($(this));
if (idx < index) {
idx = index;
$("table tr :checkbox:lt(" + idx + ")").prop('checked', true);
$(":checkbox:gt(" + idx + ")").prop('checked', false);
} else if (idx == index && !$(this).prop('checked')) {
$(":checkbox").prop('checked', false);
} else {
idx = chk.index($(this));
$(":checkbox:lt(" + idx + ")").prop('checked', true);
$(this).prop('checked', true);
$(":checkbox:gt(" + idx + ")").prop('checked', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="checkbox" class="knitting" name="knitting[]" value="1">K</td>
<td>
<input type="checkbox" class="fmending" name="fmending[]" value="1">F</td>
<td>
<input type="checkbox" class="dyeing" name="dyeing[]" value="1">D</td>
<td>
<input type="checkbox" class="firon" name="firon[]" value="1">Y</td>
<td>
<input type="checkbox" class="linking" name="linking[]" value="1">L</td>
<td>
<input type="checkbox" class="smending" name="smending[]" value="1">S</td>
<td>
<input type="checkbox" class="siron" name="siron[]" value="1">I</td>
<td>
<input type="checkbox" class="packing" name="packing[]" value="1">P</td>
<td>
<input type="checkbox" class="data" name="data[]" value="1">D</td>
<td>
<input type="checkbox" class="chalan" name="chalan[]" value="1">C</td>
</tr>
</tbody>
</table>
答案 1 :(得分:0)
你可以,
$("input[type='checkbox']").click(function() {
if (this.checked)
$("td:lt(" + $(this).closest("td").index() + ") input[type='checkbox']").prop("checked", this.checked);
});
答案 2 :(得分:0)
**编辑:此解决方案对于您不希望仅选中/取消选中连续复选框的情况非常有用,但可以根据单击的复选框选中/取消选中任何复选框。
是的,您可以添加多个类,例如对复选框染色,编织等。另外,给每个复选框一个数据属性,例如数据名称=&#34;染色&#34;
现在,
$("input[type=checkbox]").on("click", function(){
if( $(this).is(":checked") )
{
var name = $(this).attr("data-name");
$("input."+name+"false").prop("checked", false);
$("input."+name+"true").prop("checked", true);
}//if
});//click handler