jQuery 切换单选按钮

Question

我想在点击时切换一个单选按钮，但它总是返回 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"/>

Answer 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" />

Answer 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>