如何使用jQuery在兩個不同的地方檢查和取消選中具有相同名稱的復選框的值？

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

更新了我的問題，請一次檢查一次，實際上第一個復選框的值和第5個復選框的值相同，因此無論哪個復選框選中，該復選框都只能選中，在這種情況下，兩個值都選中。

我想要的是，如果我自動選擇一個地方的值1，它會選擇第二個地方的值1，並且也自動選擇第二個地方的值1，它將使用jquery選擇第一個地方的值1復選框，請幫助我。

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

        }); 

任何使用此代碼的人該怎么辦。

Answer 1

您可以將change事件綁定到class place1和place2 class ，並使用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"進行選擇：

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

注意：對於復選框，我建議單擊事件而不是更改事件，因為在某些較舊的瀏覽器中，對於鍵盤輸入，后者的行為有點怪異。

Answer 3

檢查以下代碼段。

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

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