Переключатель 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>