如何使用jquery在两个不同的地方检查和未检查具有相同名称的复选框的值？答案

【问题标题】：How to checked and unchecked values of checkboxes with same name two different places using jquery?如何使用jquery在两个不同的地方检查和未检查具有相同名称的复选框的值？
【发布时间】：2017-02-22 05:52:33
【问题描述】：

我在两个不同的地方有同名的复选框，如下所示

一个地方

<input name="checkbox-group" class="place1" value="1" type="checkbox"  />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="1" type="checkbox" />

第二名

<input name="checkbox-group" class="place2" value="1" type="checkbox"  />
<input name="checkbox-group" class="place2" value="2" type="checkbox" />
<input name="checkbox-group" class="place2" value="3" type="checkbox" />
<input name="checkbox-group" class="place2" value="4" type="checkbox" />
<input name="checkbox-group" class="place2" value="1" type="checkbox" />

更新了我的问题，请检查一次，实际上第一个复选框值相同，第 5 个复选框值相同，所以无论哪个复选框选择该复选框，都只选中，在这种情况下，两个值 1 都被选中。

我想要的是，如果我自动选择一个位置的值 1，它会自动选择第二个位置值 1 并自动选择第二个位置值 1，它将使用 jquery 选择第一个位置值 1 复选框，请帮助我。

 var vtypeid = [];
        $.each($("input[name='vtypeid']:checked"), function(){    
            vtypeid.push($(this).val());

        });

任何使用此代码的人怎么办。

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

基于name="checkbox-group" 进行选择，以防页面上存在不属于此功能的其他复选框：

$(document).ready(function() {
  var cbs = $('input[name="checkbox-group"]').click(function() {
    cbs.filter(($(this).is(".place1") ? ".place2" : ".place1")
               + '[value="' + this.value + '"]')
       .prop('checked', this.checked)  
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
First group:
<input name="checkbox-group" class="place1" value="1" type="checkbox"  />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="5" type="checkbox" />
<br><br>
Second group:
<input name="checkbox-group" class="place2" value="1" type="checkbox"  />
<input name="checkbox-group" class="place2" value="2" type="checkbox" />
<input name="checkbox-group" class="place2" value="3" type="checkbox" />
<input name="checkbox-group" class="place2" value="4" type="checkbox" />
<input name="checkbox-group" class="place2" value="5" type="checkbox" />

注意：对于复选框，我建议使用 click 事件而不是 change 事件，因为后者在某些旧浏览器中的键盘输入行为有点奇怪。

【讨论】：

【解决方案2】：

您可以将change 事件绑定到class place1 和place2 并使用value 属性可以在不同位置选中和取消选中复选框。

$(".place1").change(function () {
   $("input[value=" + $(this).attr("value") + "].place2").prop("checked", $(this).prop("checked"));
});

$(".place2").change(function () {
    $("input[value=" + $(this).attr("value") + "].place1").prop("checked", $(this).prop("checked"));
});

【讨论】：

【解决方案3】：

检查下面的sn-p。

$(document).ready(function(){
  $("input.place1[name=checkbox-group]").on('click', function(){
    if($(this).prop('checked')){
      $("input.place2[value="+$(this).val()+"]").prop('checked', true);
    }
    else{
      $("input.place2[value="+$(this).val()+"]").prop('checked', false);
    }
      
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> 1st
  <input name="checkbox-group" class="place1" value="1" type="checkbox"  />
  <input name="checkbox-group" class="place1" value="2" type="checkbox" />
  <input name="checkbox-group" class="place1" value="3" type="checkbox" />
  <input name="checkbox-group" class="place1" value="4" type="checkbox" />
  <input name="checkbox-group" class="place1" value="5" type="checkbox" />
</div>

<div> 2nd
  <input name="checkbox-group" class="place2" value="1" type="checkbox"  />
  <input name="checkbox-group" class="place2" value="2" type="checkbox" />
  <input name="checkbox-group" class="place2" value="3" type="checkbox" />
  <input name="checkbox-group" class="place2" value="4" type="checkbox" />
  <input name="checkbox-group" class="place2" value="5" type="checkbox" />
</div>

【讨论】：

选择input 类place2 与value 等于点击input

【解决方案4】：

有不同的方法。这是一种方式

$('[name = checkbox-group]').on('click', function() {
   var val = $(this).val();
   $('[name = checkbox-group][value='+val+']').prop('checked', $(this).is(':checked'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First
<input name="checkbox-group" class="place1" value="1" type="checkbox"  />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="5" type="checkbox" />

   <br />
second
<input name="checkbox-group" class="place2" value="1" type="checkbox"  />
<input name="checkbox-group" class="place2" value="2" type="checkbox" />
<input name="checkbox-group" class="place2" value="3" type="checkbox" />
<input name="checkbox-group" class="place2" value="4" type="checkbox" />
<input name="checkbox-group" class="place2" value="5" type="checkbox" />

【讨论】：

【解决方案5】：

你需要让这段代码正常工作

$(document).ready(function() {
        $('input[type="checkbox"][name=checkbox-group]').change(function () {
            $("input[name=checkbox-group][value='" + $(this).val() + "']").prop('checked', $(this).is(':checked'))
        });
    });

【讨论】：

【解决方案6】：

提供唯一的 ID 这样做

 <input name="checkbox-group" id="chk1" class="place1" value="1" type="checkbox" onclick="document.getElementById('chk2').checked = this.checked;" />


    <input name="checkbox-group_1" id="chk2" class="place2" value="1" type="checkbox" onclick="document.getElementById('chk1').checked = this.checked;" />

【讨论】：

但是......那么您必须为每个复选框设置单独的点击处理程序。是不是很麻烦？