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

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

如果您确实需要以编程方式执行click事件，则此方法非常有用。

<强>即：

$('#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>

Answer 2

您需要使用$('#male').change(function() { console.log("Male was checked") }); $('#female').change(function() { console.log("Female was checked") });事件：

{{1}}

Answer 3

您的原始代码几乎拥有它，只需更改绑定即可使用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/

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

3 个答案: