javascript - 触发单击单选按钮会在切换之前检查条件

Question

抱歉，标题有些含糊，但我会尽力解释得更好。我在 this 中写了一些快速代码codepen 来显示我的问题。

本质上，我的 codepen 有两个切换按钮，“男”和“女”，以方便使用。我还附加了一个按钮和一个点击监听器:$('#doClick').click(function() {...}。

单击按钮时，单击监听器通过调用 $("#female").click(); 来切换女性按钮

我的问题是，当页面首次加载并且默认选择“男性”时，按下按钮会更改切换按钮，但它仍然在控制台中显示“已选中男性”。因此，本质上，在单选按钮实际切换为“女性”之前，会先检查点击监听器中的 if 条件。

这是更大代码段的一部分，其中根据当前选择的内容执行不同的代码，因此在我的代码中，由于切换和条件检查的时间安排，正在执行不正确的代码。

我希望我的问题得到很好的描述。

我想知道是否有人知道为什么会这样，我能做些什么来解决这个问题？以下代码修复了此问题:

$('#male').click(function() {
  console.log("Male was checked")
});

$('#female').click(function() {
  console.log("Female was checked")
});

但我不确定是否需要两个不同的点击监听器，并且想知道是否有更好的解决方案。

谢谢

Answer 1

您的原始代码几乎已经完成了，只需更改绑定(bind)以使用 change 而不是 radio 的 click

$('#male, #female').on('change', function() {

  console.log("A click was registered");

  if($("#male").is(":checked")) {
    console.log("Male is checked");
  } else if($("#female").is(":checked")) {
    console.log("Female is checked");
  }

});

我更希望您检查选中哪个框，以便您设置女性或男性来检查负载，并且您的代码仍然可以正常工作。

关于 jquery 更改的文档

Bind an event handler to the "change" JavaScript event, or trigger that event on an element

https://api.jquery.com/change/