Question

我有2个复选框。它们应该同步，所以我做了一些jQuery

<input type="checkbox" id="check1" onclick="jQuery('#check2').trigger('click')">
<input type="checkbox" id="check2" onclick="jQuery('#check1').trigger('click')">

当我按下check1时，check2将被选中/取消选中，但也会触发check2的onclick，因此将检查check1 - ＆gt;选中。我该如何解决这个问题？

Answer 1

通常，您应该使用单选按钮，因为它具有内置的所需功能。但是，要回答您的问题，您需要设置/删除框的选中状态，而不是触发单击。 / p>

<input type="checkbox" id="check1" onclick="jQuery('#check2').attr('checked', false)">
<input type="checkbox" id="check2" onclick="jQuery('#check1').attr('checked', false)">

如果你想同步它们，那么你可以移动JS，使它不是内联的，并使用类似的东西：

jQuery(function() {
    var boxes = $('input[type=checkbox]');

    boxes.on('click', function(evt) {
        var other = boxes.not( $(this) );

        if( other.is(':checked') )
            other.removeAttr('checked');
        else
            other.attr('checked', true);
    });
});

Answer 2

尝试使用附加到change的{{1}}事件将元素放置在父容器中;在parentElement :checkbox处理程序内设置兄弟元素change属性到当前元素checked属性

＆＃13;

checked

＆＃13;

$("div :checkbox").on("sync", function(e) {
  console.log(e.target.id)
})

$("div :checkbox").on("change", function() {
  $(this).siblings().prop("checked", this.checked)
  .trigger("sync")
})

＆＃13;

Answer 3

您在html元素中使用的onclick事件是不必要且令人困惑的。相反，我建议你为这两个元素添加一个类，然后你可以取消选中除了刚刚点击的元素之外的所有元素。

<强> HTML

<input type="checkbox" id="check1" class="myClass" >Box 1
<input type="checkbox" id="check2" class="myClass">Box 2

JQuery / Javascript

var $checkboxes = $('.myClass');
$checkboxes.click(function() {
   $checkboxes.not(this).prop('checked', false);
});

JS Fiddle demo

当事件来自另一个onclick时禁用onclick

3 个答案: