在复选框或单选按钮上触发 "click" 事件会在事件处理函数完成后切换 "checked" 属性

Question

在 radioButton 和复选框

上的 jquery 单击事件有奇怪的行为

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

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

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

    };
});

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

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

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

希望对您有所帮助。

在复选框或单选按钮上触发 "click" 事件会在事件处理函数完成后切换 "checked" 属性

Triggering "click" event on a checkbox or radio button toggles the "checked" property after the event handler function finish

checkbox

jquery

events

radio-button