jQuery 切换单选按钮

Posted 2023-03-05

【中文标题】jQuery 切换单选按钮

【英文标题】：jQuery toggle radio button

【发布时间】：2020-05-20 01:42:26

【问题描述】：

我想在点击时切换一个单选按钮，但它总是返回 true，而不是未选中。我想在选中无线电时调用一个函数，并在未选中时运行另一个函数，我该怎么做？

$('input[type="radio"]').click(function() 
  console.log($(this).is(':checked'))
  if ($(this).is(':checked')) 
    $(this).attr('checked', false)
   else 
    $(this).attr('checked', true)
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="ch"/>
<input type="radio" name="ch"/>

【问题讨论】：

必须使用单选按钮，您可以使用复选框，因为通常单选按钮用于单选？

不明白为什么要“破解”单选按钮来获得这种行为。使用复选框。

@RoryMcCrossan 因为要使用单选按钮，所以需要使用。我使用单选按钮，该用户可以选择 a 或 b，或者只是取消选择 a 或 b，我还需要单选 UI

您可以使用 CSS 使复选框看起来像一个单选按钮。那你根本不需要任何JS。

好吧，那不是问题所在。可切换的收音机是一个解决方案，但它不是标准的，大多数用户不会期望它。因此，这不是一个很好的用户体验决定。一个更好的选择可能是下拉所有三个选项。或者使用标准无线电控制，并有 A/B/Neither 作为选项。

【参考方案1】：

不行，不能这样，你要先检测有没有勾选，我用了变量checked

function f1() 
  console.log('run 1st func!')


function f2() 
  console.log('run 2nd func!')


let checked = true
$('input:radio').click(function() 
  let bu = $(this);
  checked = !checked
  checked ? bu.prop('checked', !this.checked) + f1() :
    bu.prop('checked', this.checked) + f2()
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" />

【参考方案2】：

您可以使用.prop() 结合isChecked 变量来实现它。

var isChecked = false;
$('input[type="radio"]').click(function() 
  $(this).prop('checked', !isChecked);
  isChecked = !isChecked;
  
  if(isChecked) f1();
  else f2();
  
);

var f1 = function()
  console.log("F1");
;

var f2 = function()
  console.log("F2");
;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" />

更新

您也可以像这样使用 2 个单选按钮

$('input[type="radio"]').click(function() 
  var value = $(this).filter(":checked").val();
 
  if(value === 'f1') 
    f1();
  else 
    f2();
  
);

var f1 = function()
  console.log("F1");
;

var f2 = function()
  console.log("F2");
;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="my_radio" value="f1" /> <label>F1</label>

<input type="radio" name="my_radio" value="f2" /> <label>F2</label>

【讨论】：

好的，谢谢，我怎样才能运行两个 diff 函数？？

两者都有帮助:) 我该怎么办？？

我刚刚用 2 个单选按钮更新了我的答案，请查看@danny cavanagh

这能回答你的问题吗？如果您需要任何帮助，请告诉我@danny cavanagh