Question

Strange通过radioButton和复选框

在jquery点击事件上表现

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

当代码触发这些元素上的click事件时，首先事件处理程序正在运行，然后check属性正在改变。

 <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

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

一样简单

＆＃13;

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

＆＃13;

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

＆＃13;

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.

希望它有所帮助。

触发＆＃34;点击＆＃34;复选框或单选按钮上的事件切换＆＃34;已选中＆＃34;事件处理函数完成后的属性

2 个答案: