1

看下面的jsfiddle：http: //jsfiddle.net/RA3GS/4/

如果您手动选中复选框，您会看到它们在选中时表示已选中并保持选中状态。但是，如果您按下测试按钮，您会看到它们要么说它们已检查，然后变为未选中，要么说它们未检查，然后说它们已检查。

这是问题所在：如果我选择不事先设置选中的值，则最后会正确选中复选框，但单击的函数错误地声明它未选中。如果我确实设置了选中的值，那么 click() 函数正确地指出复选框已选中，但随后一些其他事件（取消）有助于在最后取消选中复选框。

jsfiddle 是一个测试；在我的实际实现中，我将无法控制输入元素上的 click() 函数，因此这不仅仅是更改 click 函数中的登录名的问题。

这正是我想要的行为：

  • 你点击按钮。
  • 任何 click() 函数都会被触发并相信要检查的元素。
  • 所有其他事件都认为该复选框被选中。
  • 当一切都说完了，复选框仍然被选中。

更简单的例子

我在这里放了一个更简单的 jsfiddle：http: //jsfiddle.net/49jUL/

在不更改status功能的情况下，无论您选中哪个复选框，我都希望控制台显示相同。当前输出为：

点击手册

A tester received the following event change
Value:  100  Checked:  true
A tester received the following event click
Value:  100  Checked:  true

点击控制器

A tester received the following event click
Value:  100  Checked:  true
A tester received the following event change
Value:  100  Checked:  false

我发现有趣的是，如果我单击手动单选按钮，change首先调用然后 click调用，而如果我触发单击，click调用然后 change调用。

请注意，当我尝试调用它时，$target.change().click()它只是调用change, then click，然后 finallychange再次checked设置为 false。

4

2 回答 2

3

根据我的评论——

该checked字段是property，而不是attribute，因此我建议对“已检查”状态使用适当的访问器和 mutator：

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

和

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

或者，您可以使用is()带有:checked伪选择器的函数来查看它是否被选中：

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

“checked”属性在复选框初始加载后不会改变。有关复选框状态的更多信息，请参阅jQuery 文档。prop()

编辑：解决方案

在找到解释此行为的错误报告后，我对错误注释中记录的解决方法进行了一些实验：使用 oftriggerHandler("click")而不是调用click().

click()只是一个快捷方式trigger("click")，它将触发选择器找到的所有元素上的匹配事件，并且还将调用本机处理程序。triggerHandler("click"), OTOH，只会触发选择器找到的第一个元素的事件，并且会阻止默认（本机）行为的发生。这是与复选框的“选中”状态混淆的本机行为。通过避免它，您可以获得所需的行为。

这是我的解决方案的更新 jsFiddle。

于 2012-05-15T16:47:35.880 回答
0

您不能简单地触发单击复选框，您需要验证当前状态，然后采取相应措施：

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

请参阅此小提琴示例！

已编辑

ThiefMaster 在第一条评论中给出了改进。

于 2012-05-14T22:05:33.370 回答