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

Question

I am attempting to reset a form field by wiping all checked properties and then applying the checked property back to the one with a "checked = 'checked'"attribute.

However, I'm not sure how to only select the element that passes my if statement, as console.log(thingo) is logging all three checkboxes.

$('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>

score 1 · Accepted Answer · answered Jul 26 '20 at 05:05

This can be quite simply solved by using Jquery's attribute selector. All I have to do is:

 $(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

Alfred Dagenais · Answer 2 · 2020-07-26T03:37:50.950

$('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 format, just add a default 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>

Some elements here:

Use button instead of a. Clicking on a button does do something though, when used in its natural environment
Use jQuery.on instead of jQuery.click see : Difference between .on('click') vs .click()
For checked attribute see : What's the proper value for a checked attribute of an HTML checkbox?

Thanks for the answer, however I cannot just add a class to the one that i want to be default. The code generates the html and then sends it to the browser, I have to use the checked attribute as it is the only thing that differentiates the inputs. — Bubinga, Jul 26 '20 at 03:31
@Bubinga ok perfect. You could use the same code I put, but before the `$('button').on('click',function () {` you can add `$(document).ready(function() {` and check if they have a `checked ` value. And if True add a Default CSS Class What do you think? — Alfred Dagenais, Jul 26 '20 at 03:33
I guess that might work, but I'd much rather use the checked selector. The question is also about accessing the element that passes an if statement. — Bubinga, Jul 26 '20 at 03:46
Thanks again for your help, I figured it out if you want to check my answer — Bubinga, Jul 26 '20 at 05:07

score -1 · Answer 3 · answered Jul 26 '20 at 03:14

you don't need to write checked="checked" but its actually only checked when you want some button to be true by default you just need to add checked refer this link once: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio I think this can help you

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

3 Answers3