使单选按钮表现得像复选框

Question

出于与主题无关的原因，我有一组 2 个单选按钮，我需要它们的行为类似于复选框。我的意思是，其中一个单选按钮将被隐藏，另一个需要能够被清除（实际上检查隐藏的那个）。

看起来像这样：

<ul id="id_member_field_request-demo-1">
    <li>
        <label for="id_member_field_request-demo-1_0"><input type="radio" name="member_field_request-demo-1" value="Please contact me to schedule a 60 minute, 1-on-1 demo" field_id="8394681" id="id_member_field_request-demo-1_0">Please contact me to schedule a 60 minute, 1-on-1 demo</label>
    </li>
    <li>
        <label for="id_member_field_request-demo-1_1"><input type="radio" name="member_field_request-demo-1" value="false" field_id="8394681" id="id_member_field_request-demo-1_1">false</label>
    </li>
</ul>

到目前为止我有：

var radio1 = $('#id_member_field_request-demo-1_0');
var radio2 = $('#id_member_field_request-demo-1_1');

radio2.prop('checked', true).css('display', 'none');

radio1.click(function() {
  if(radio1.is(':checked')) {
    radio2.click();
  }
});

不幸的是，单击可见单选按钮 (radio1) 总是 returns 它已被选中...因此永远无法进入选中状态。我需要知道以前是不是 checked/unchecked.

我能想到的唯一方法是将当前选中的收音机保存在一个变量中，然后从那里开始......所以我最终得到这个：

var radio1 = $('#id_member_field_request-demo-1_0');
var radio2 = $('#id_member_field_request-demo-1_1');

radio2.prop('checked', true).parent().css('display', 'block');

var checkedId = radio2.attr('id');
//console.log(checkedId);

radio1.click(function() {
  if(checkedId == radio1.attr('id')) {
    radio2.prop('checked', true);
    checkedId = radio2.attr('id');
  } else {
    checkedId = radio1.attr('id');
  }
});

这行得通 - 只是检查一下是否有更直接的方法？

Answer 1

我建议使用 .data() 保持内部检查状态。

var radio1 = $('#id_member_field_request-demo-1_0');
var radio2 = $('#id_member_field_request-demo-1_1');

radio2.prop('checked', true).hide();
radio1.prop('checked', true).data('checked', true).show();

radio1.click(function() {
  if ($(this).data('checked')) {
    $(this).data('checked', false);
    radio2.prop('checked', true);
  } else {
    $(this).prop('checked', true).data('checked', true);
  }
  console.log("radio1 =", radio1.prop("checked"), "radio2 =", radio2.prop("checked"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="demo" id="id_member_field_request-demo-1_0" value="0">
<input type="radio" name="demo" id="id_member_field_request-demo-1_1" value="1">

使单选按钮表现得像复选框

making a radio button behave like a checkbox

checkbox

jquery

radio-button