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

Question

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

基本上，我的 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

您的原始代码几乎已经完成，只需将绑定更改为使用change 而不是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 change的文档

将事件处理程序绑定到“更改”JavaScript 事件，或在元素上触发该事件

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

Answer 2

您需要改用change 事件：

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

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

Answer 3

您可以绑定一个自定义事件，并在以编程方式调用事件“click”之后立即调用它。

如果您确实需要以编程方式执行click 事件，这种方法很有用。

IE：

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

$('#male, #female').click(function(e) {
  console.log("A click was registered");
});

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

$('#doClick').click(function() {
  $("#female").click();
  $("#female").trigger('radiobuttonChecker');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="gender" value="male" id="male" checked> Male<br>
<input type="radio" name="gender" value="female" id="female"> Female<br>


<button id="doClick">Click</button>