数组输入复选框上的“依赖”复选框
Dependent checkbox on array input checkboxes
我有两个数组复选框,即chk1&chk2此复选框数据是动态生成的。当我检查chk1英国时,意味着必须检查chk290。如果US意味着必须检查60,依此类推。有什么建议吗?
<input type="checkbox" name="chk1" id="chk1" value="UK"> UK
<input type="checkbox" name="chk1" id="chk1" value="US"> US
<input type="checkbox" name="chk1" id="chk1" value="IN"> IN
<input type="checkbox" name="chk2" id="chk2" value="90"> 90
<input type="checkbox" name="chk2" id="chk2" value="60"> 60
<input type="checkbox" name="chk2" id="chk2" value="10"> 10
标记Jquery时,可以使用.eq()
和.index()
$('input[name=chk1]').on('click' , function(){
if($(this).is(":checked")){
$('input[name=chk2]').eq($(this).index()).prop('checked' , true);
}else{
$('input[name=chk2]').eq($(this).index()).prop('checked' , false);
}
});
工作演示
注意:请确保包含jquery
:eq()
选择器与.index()
的另一种使用方法
$('input[name=chk2]:eq('+$(this).index()+')')
纯JavaScript
<input onclick='handleClick(this);' type="checkbox" name="chk1" id="chk1" value="UK"> UK
<input onclick='handleClick(this);' type="checkbox" name="chk2" id="chk2" value="US"> US
<input onclick='handleClick(this);' type="checkbox" name="chk3" id="chk3" value="IN"> IN
<input type="checkbox" name="chk4" id="chk4" value="90"> 90
<input type="checkbox" name="chk5" id="chk5" value="60"> 60
<input type="checkbox" name="chk6" id="chk6" value="10"> 10
<script>
function handleClick(cb) {
switch (cb.name) {
case "chk1":
document.getElementById("chk4").checked = cb.checked;
break;
case "chk2":
document.getElementById("chk5").checked = cb.checked;
break;
case "chk3":
document.getElementById("chk6").checked = cb.checked;
break;
}
}
</script>
我自己的任务解决方案
$(document).on('click' ,'input[name=chk1]', function(){
$("input[name=chk1]").each(function(i) {
if($(this).is(":checked"))
$('input[name=chk2]:eq('+i+')').prop('checked' , true);
else
$('input[name=chk2]:eq('+i+')').prop('checked' , false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="checkbox" name="chk1" id="chk1" value="UK"> UK
<input type="checkbox" name="chk1" id="chk1" value="US"> US
<input type="checkbox" name="chk1" id="chk1" value="IN"> IN
<br>
<input type="checkbox" name="chk2" id="chk2" value="90"> 90
<input type="checkbox" name="chk2" id="chk2" value="60"> 60
<input type="checkbox" name="chk2" id="chk2" value="10"> 10
您可以按照以下方式进行操作。希望这对你有帮助。
$("input[type=checkbox][name=chk1]").change(function () {
var status = this.checked;
$("input[type=checkbox][name=chk2]").eq($(this).index()).prop('checked', status);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="chk1" id="chk1" value="UK"> UK
<input type="checkbox" name="chk1" id="chk1" value="US"> US
<input type="checkbox" name="chk1" id="chk1" value="IN"> IN
<input type="checkbox" name="chk2" id="chk2" value="90"> 90
<input type="checkbox" name="chk2" id="chk2" value="60"> 60
<input type="checkbox" name="chk2" id="chk2" value="10"> 10
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 正在验证8个真/假复选框或复选框中的2个
- 为复选框javascript指定两个值
- 如何在单击复选框后调用控制器方法
- 从复选框和Selects-KnockoutJS中获取值的总和
- 选中多个具有相同名称的复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 使用$.ajax发布多个复选框
- AngularJS单选筛选不适用于Name、Description和Field4复选框值
- jquery中的复选框依赖项
- 如何在Knockout.js中选中复选框时更新视图模型及其依赖项
- 依赖复选框,您认为这可以简化更多吗?
- 数组输入复选框上的“依赖”复选框
- 如何在knockoutjs中实现复选框依赖关系
- 显示和隐藏表单字段(li)依赖于复选框
- LiveCycle -多个计算依赖于选中的复选框和输入字段
- 我如何使内容依赖的复选框,在JavaScript中的复选框
- 使用Django、CSS和Javascript使HTML表单文本字段依赖于复选框的选择
- Jsp:复选框和超链接依赖关系