如何重置除具有选中属性的单选按钮之外的所有单选按钮？答案

【问题标题】：How to reset all radio buttons except for the one with a checked attribute?如何重置除具有选中属性的单选按钮之外的所有单选按钮？
【发布时间】：2020-07-26 13:05:58
【问题描述】：

我试图通过擦除所有checked 属性然后将checked 属性应用回具有"checked = 'checked'" 属性的属性来重置表单字段。

但是，我不确定如何只选择通过我的if 语句的元素，因为console.log(thingo) 正在记录所有三个复选框。

$('a').click(function () {
  if ($(this).parents('.form-field').find('.form-check-input').length != 0) { // does the revert button belong to a group with radio button inputs?    
    $(this).parents('.form-field').find('.form-check-input').prop('checked', false); //clear all checkboxes
    var thingo = $(this).parents('.form-field').find('.form-check-input');  //set checkboxes to thingo

    if (thingo.attr('checked') != null) {
      console.log(thingo);
      thingo.prop('checked', true); //attempt to set all checkboxes with attribute checked to be checked
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="form-group form-field">
  <label class="form-check-label">
    Sex
    <span>[<a href="javascript:void(0);">Revert</a>]</span>
  </label>
  <div class="form-check">
    <input type="radio" class="form-check-input" value="0" checked="checked">
    <label class="form-check-label">Male</label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" value="1">
    <label class="form-check-label">Female</label>
  </div>
  <div class="form-check">
    <input type="radio" class="form-check-input" value="2">
    <label class="form-check-label">Unclear</label>
  </div>
</div>

【问题讨论】：

标签： javascript html jquery radio-button

【解决方案1】：

这可以通过使用 Jquery 的属性选择器非常简单地解决。我所要做的就是：

 $(this).parents('.form-field').find('.form-check-input').prop("checked", false);  
//^this line clears all existing checks          
 $(this).parents('.form-field').find("[checked = 'checked']").prop("checked", true);
//^this line finds the checked attribute with the attribute selector and sets it to checked

【讨论】：

【解决方案2】：

$('button').on('click',function () {
    var formField = $(this).parents('.form-field');
    var formFieldInputs = formField.find('.form-check-input');
    if (formFieldInputs.length){
        formFieldInputs.prop("checked", false); //clear all checkboxes
        formField.find('.form-check-input-default').prop("checked", true);
    }
});

HTML 格式，只需添加一个默认类

<div class="form-group form-field">
       <label class="form-check-label">
           Sex
           <span>[<button>Revert</button>]</span>
       </label>
       <div class="form-check">
           <input type="radio" class="form-check-input form-check-input-default" value="0" checked />
           <label class="form-check-label">Male</label>
       </div>
       <div class="form-check">
           <input type="radio" class="form-check-input" value="1" />
           <label class="form-check-label">Female</label>
       </div>
       <div class="form-check">
           <input type="radio" class="form-check-input" value="2" />
           <label class="form-check-label">Unclear</label>
       </div>
</div>

这里有一些元素：

使用button 而不是a。但是，在自然环境中使用时，单击按钮确实会有所作为
使用jQuery.on 代替jQuery.click 请参阅：Difference between .on('click') vs .click()
检查属性见：What's the proper value for a checked attribute of an HTML checkbox?

【讨论】：

感谢您的回答，但是我不能只添加一个类到我想要默认的类。代码生成 html，然后将其发送到浏览器，我必须使用 checked 属性，因为它是唯一区分输入的东西。
@Bubinga 好的，完美。您可以使用我输入的相同代码，但在 $('button').on('click',function () { 之前，您可以添加 $(document).ready(function() { 并检查它们是否具有 checked 值。如果 True 添加一个 Default CSS Class 你怎么看？
我想这可能有效，但我更愿意使用选中的选择器。问题还在于访问传递 if 语句的元素。
再次感谢您的帮助，如果您想查看我的答案，我想通了

【解决方案3】：

你不需要写checked="checked" 但它实际上只检查了当您希望某些按钮默认为真时，您只需要添加选中参考此链接一次： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio 我认为这可以帮助你

【讨论】：