代码之家 › 专栏 › 技术社区 › user3186023

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

click radio-button if-statement jquery javascript

user3186023 · 技术社区 · 7 年前

很抱歉标题有点模糊,但我会尽量解释得更好。我在中编写了一些快速代码 this 代码笔显示我的问题。

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

单击按钮时,单击侦听器通过调用 $("#female").click();

我的问题是,当页面第一次加载并且默认选择“男性”时,按下按钮会更改切换按钮,但它仍然会在控制台中弹出“男性已选中”。所以本质上 if 已检查单击侦听器中的条件之前单选按钮实际上切换为“女性”。

这是一段较大代码的一部分,根据当前选择的代码执行不同的代码,因此在我的代码中,由于切换和条件检查的计时,执行的代码不正确。

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

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

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

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

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

谢谢

3 回复 | 直到 7 年前

Huangism 7 年前

您的原始代码几乎已经拥有了它,只需更改绑定即可使用 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的文档 改变

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

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

Ele 7 年前

您可以绑定一个自定义事件,并在通过编程调用event'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>

Zakaria Acharki 7 年前

您需要使用 change 改为事件:

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

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