数组输入复选框的相关复选框答案

【问题标题】：Dependent checkbox on array input checkboxes数组输入复选框的相关复选框
【发布时间】：2015-12-28 10:57:29
【问题描述】：

我有两个数组复选框，即 chk1 和 chk2，此复选框数据是动态生成的。当我检查 chk1 UK 意味着 chk2 90 必须检查。如果 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

【问题讨论】：

id 对于每个元素应该是唯一的。

标签： javascript jquery checkbox

【解决方案1】：

当您标记 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);
  }
});

Working Demo

注意：一定要包含jquery

使用:eq() 选择器和.index() 的另一种方式

 $('input[name=chk2]:eq('+$(this).index()+')')

【讨论】：

【解决方案2】：

纯 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>

【讨论】：

【解决方案3】：

这个任务我自己的解决方案

$(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

【讨论】：

【解决方案4】：

你可以像下面那样做。希望这会对你有所帮助。

$("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

【讨论】：