jQuery click()并更改选中的值

ryhaxcpt  于 2022-11-29  发布在  jQuery
关注(0)|答案(2)|浏览(131)

请看下面的jsfiddle:http://jsfiddle.net/RA3GS/4/
如果您手动勾选核取方块,您会看到核取方块在勾选后会显示为已勾选,并保持勾选状态。但是,如果您按下测试按钮,您会看到核取方块或是显示为已勾选,然后变成未勾选,或是显示为未勾选,然后显示为已勾选。
问题就在这里:如果我选择不预先设置checked值,那么checkbox在最后会被正确地选中,但是被点击的函数会错误地声明它未被选中;如果我设置了checked值,那么click()函数会正确地声明checkbox被选中,但是在最后某个其他事件(un)帮助取消了checkbox。
jsfiddle是一个测试;在我的真实的实现中,我将无法控制input元素上的click()函数,因此这不仅仅是更改click函数中的登录名的问题。
这就是我想要的行为,确切地说:

  • 您单击按钮。
  • 任何click()函数被触发,并认为该元素被检查。
  • 所有其他事件都认为该复选框已选中。
  • 当一切都说了和做了,复选框仍然是选中的。

更简单的示例

我在这里放了一个更简单的jsfidle:http://jsfiddle.net/49jUL/
在不更改status函数的情况下,我希望控制台显示相同,无论您选中哪个复选框。

点击手动

测试人员收到以下事件更改
值:100已检查:真的
测试人员收到以下事件单击
值:100已检查:真的

点击控制器

测试人员收到以下事件单击
值:100已检查:真的
测试人员收到以下事件更改
值:100已检查:假的
有趣的是,如果单击manual单选按钮,将首先调用change,然后 * 调用click,而如果触发click,将调用click,然后 * 调用change
注意,当我尝试调用$target.change().click()时,它只调用change,然后是click,最后是changechecked设置为false。

plicqrtu

plicqrtu1#

从我的评论--
checked字段是一个 property,而不是一个 attribute,因此我建议使用适当的访问器和赋值器来表示“checked”状态:

$('#checkBoxElId').prop("checked");

$('#checkBoxElId').prop("checked", true/false);

或者,您可以使用is()函数和:checked伪选择器来查看它是否被选中:

$('#checkBoxElId').is(':checked');

“checked”属性在初始加载复选框后不会更改。有关复选框状态的详细信息,请参阅prop()上的the jQuery documentation

编辑:解决方案

在找到解释此行为的bug报告后,我对bug注解中记录的解决方法做了一些试验:使用triggerHandler("click")而不是调用click()
click()只是trigger("click")的一个快捷方式,它将在选择器找到的所有元素上触发匹配事件,并且还将调用本机处理程序。triggerHandler("click"),OTOH,将只为选择器找到的第一个元素触发事件,并将防止默认(本机)行为的发生。正是本机行为扰乱了复选框的“选中”状态。通过避免它,您可以获得所需的行为。
这是我的解决方案的updated jsFiddle

mznpcxlj

mznpcxlj2#

你不能简单地触发点击复选框,你需要验证当前状态,然后采取相应的行动:

$('#pushbutton').on("click", function() {
    var $obj = $('#myCheckBoxID');
    $obj.prop('checked', !$obj.prop('checked'));
    alert('now check is: ' + $obj.prop('checked'));
});

见此Fiddle Example!

已编辑

遵循ThiefMaster在第一条评论上给出的改进。

相关问题