Question

我有两个不同位置的同名复选框，如下面的

一个地方

<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" />

更新了我的问题，plz检查一次，实际上一个地方第一个复选框值相同，第五个复选框值相同，所以无论哪个复选框选择该复选框仅选择，在这种情况下都检查值1。

我想要的是，如果我自动选择一个地方的值1它选择第二个地方值1并且自动选择第二个地方值1它将选择第一个地方值1复选框选择使用jquery，plz帮助我。

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

        });

任何一个使用此代码的人如何做。

Answer 1

您可以将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"));
});

Answer 2

如果网页上还有其他复选框不属于此功能，则根据name="checkbox-group"进行选择：

＆＃13;

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

＆＃13;

<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" />

＆＃13;

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

Answer 3

查看下面的代码段。

＆＃13;

$(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);
    }
      
  })
})

＆＃13;

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

＆＃13;

Answer 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" />

Answer 5

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

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

Answer 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;" />

如何使用jquery检查和取消选中具有相同名称的两个不同位置的复选框的值？

6 个答案: