在事件处理函数完成后，在复选框或单选按钮上触发“单击”事件会切换“选中”属性答案

【问题标题】：Triggering "click" event on a checkbox or radio button toggles the "checked" property after the event handler function finish在事件处理函数完成后，在复选框或单选按钮上触发“单击”事件会切换“选中”属性
【发布时间】：2015-07-01 01:35:17
【问题描述】：

在单选按钮和复选框上的 jquery 单击事件上的奇怪行为

当用户单击单选按钮时，首先切换属性检查，然后运行事件处理程序。

当代码在这些元素上触发点击事件时，首先运行事件处理程序，然后检查属性发生变化。

这里的例子： https://jsfiddle.net/j2bs01ez/3/

 <body >
  <input type="radio" id="test-checkbox" name="test" checked="true"/>
      <input type="radio" id="test-checkbox2" name="test"/>
  <span id="test-click">trigger click event</span>
 </body>

$(function(){


    $("#test-click").click(function(){

        $("#test-checkbox2").click();

    });

    $(document).on("click",'[name$="test"]',function () { 

        print();

    });
    var print=function(){
    alert( $('input[name$="test"]:checked').attr("id"));

    };
});

如何避免这个问题并在属性检查切换后触发点击？

【问题讨论】：

这真的很混乱吗？首先，正确的事件应该是change，而不是click，其次，如果你只是想在点击其他东西时切换它们，还有更简单的方法吗？
jsfiddle.net/adeneo/j2bs01ez/4
您可以将其作为答案发布，如果没有其他人会提出更好的答案，我会接受它
嗯，这就是你想要做的，只需切换单选按钮？
稍微复杂一点，因为单选按钮不止2个。但是我知道点击单选的Id，所以我可以先检查一下，然后运行事件。它类似于你的建议

标签： jquery events checkbox radio-button

【解决方案1】：

单击另一个元素时切换单选框应该很简单

$("#test-click").on('click', function() {
    $('[name$="test"]:not(:checked)').prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" id="test-checkbox" name="test" checked="true" />
<input type="radio" id="test-checkbox2" name="test" /> 
<br /><br />
<span id="test-click">Click to toggle radios</span>

【讨论】：

顺便说一下，我找到了这篇关于这个主题的文章：bennadel.com/blog/…

【解决方案2】：

一个简单的功能来做到这一点：

function checkNextRadioInGroup (group) {
    var group = ":radio[name='" + group + "']";
    var current = $(group + ":checked").index();
    var all = $(group).length - 1;
    if (current == all) {
        $(group + ":first").trigger("click");
    }
    else {
        $(group + ":checked").next().trigger("click");
    }
};

然后你可以像这样在你的点击事件中调用它：

$("#test-click").on("click", function(){
    checkNextRadioInGroup ("test");
});

这只是一个例子。

Live here.

希望对你有帮助。

【讨论】：