jQuery - 试图检查单选按钮是否被选中，但它说即使没有选中

Question

我一直在寻找半小时来尝试获得一个功能，如果再次单击，它会取消选中我的单选按钮。我的功能目前看起来像这样（带有警报以查看到底发生了什么）：

function radUncheck(id)
{
    alert(id + " " + $("#" + id).prop('checked'));
    if ($("#" + id).prop('checked'))
    {
        alert($("#" + id).prop('checked'));
        $("#" + id).prop('checked', false);
    }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="semesterlage-ss-a" name="semesterlage" value="SS" onclick="radUncheck(\'semesterlage-ss-a\')"/>
						<label for="semesterlage-ss-a">SS</label>
<input type="radio" id="semesterlage-ws-a" name="semesterlage" value="WS" onclick="radUncheck(\'semesterlage-ss-a\')"/>
						<label for="semesterlage-ws-a">WS</label>

但是，每当我尝试它时，它都会说 #semesterlage-ss-a 无论是否为真（已选中），而 #semesterlage-ws-a 无论是否为假（未选中）不是。

Answer 1

您需要为收音机分配一个数据属性。这表示收音机的状态（问题是收音机始终处于点击状态）。

function radUncheck(elm) {

  if ($(elm).data('checked')) {     // If the radio is already checked
    $(elm).prop('checked', false);  // Uncheck this radio
    $(elm).data('checked', '');     // Remove data attribute

  } else {
  var name = $(elm).attr('name');   // Get the name of this radio
    $('input[name="' + name + '"]').data('checked', ''); // remove all data attributes from this radio name group
    $(elm).data('checked', true);   // Set new data attribute to this radio to indicate that it is selected
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="semesterlage-ss-a" name="semesterlage" value="SS" onclick="radUncheck(this)"/>
						<label for="semesterlage-ss-a">SS</label>
<input type="radio" id="semesterlage-ws-a" name="semesterlage" value="WS" onclick="radUncheck(this)"/>
						<label for="semesterlage-ws-a">WS</label>

Answer 2

试试这个或点击这个链接可能对你有帮助。 How to check radio button is checked using JQuery?

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
     function radUncheck(id)
        {
          var radioValue = $("input[name='semesterlage']:checked").val();
          if ($("#radio1").prop("checked")) {
            // do something
          }
          // OR
          if ($("#radio1").is(":checked")) {
            // do something
          }
          // OR if you don't have ids set you can go by group name and value
          // (basically you need a selector that lets you specify the particular input)
          if ($("input[name='radioGroup'][value='1']").prop("checked"))
         }
         <!-- language: lang-html -->
         <input type="radio" id="semesterlage-ss-a" name="semesterlage" value="SS" onclick="radUncheck(\'semesterlage-ss-a\')"/>
                    <label for="semesterlage-ss-a">SS</label>
        <input type="radio" id="semesterlage-ws-b" name="semesterlage" value="WS" onclick="radUncheck(\'semesterlage-ss-b\')"/>
                    <label for="semesterlage-ws-b">WS</label>

Answer 3

您可以使用数据属性来做到这一点。

参见示例：

function radUncheck(el) {
  if ($(el).data('checked')) {
    $('input[type="radio"]').prop('checked', false).data('checked', '');
  } else {
    $('input[type="radio"]').data('checked', '');
    $(el).data('checked', true);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="semesterlage-ss-a" data-checked="" name="semesterlage" value="SS" onclick="radUncheck(this)" />
<label for="semesterlage-ss-a">SS</label>
<input type="radio" id="semesterlage-ws-a" data-checked="" name="semesterlage" value="WS" onclick="radUncheck(this)" />
<label for="semesterlage-ws-a">WS</label>

注意：使用console.log 而不是alert 来调试您的代码。