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

Question

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

但是，我不确定如何只 select 通过我的 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>

Answer 1

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

Answer 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格式，加个默认的class

就可以了

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

Answer 3

这可以通过使用 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

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

How to reset all radio buttons except for the one with a checked attribute?

html

javascript

jquery

radio-button