Uncheck checked radio button by clicking on label using jQuery

user_2485833 0
Viewed 6292

I need to uncheck checked radio buttons using jQuery. The buttons themselves are hidden so I am using clicks on the labels to trigger this. So far I have:

HTML

<form>
  <h4>Where would you like to work?</h4>
  <div class="radio-holder">
    <input id="form1_areas1" name="areas" type="radio" value="area/london">
    <label for="form1_areas1">London</label>
  </div>
  <div class="radio-holder">
    <input id="form1_areas2" name="areas" type="radio" value="area/west-midlands">
    <label for="form1_areas2">West Midlands</label></div>
</form>

SCSS

form {
  max-width: 500px;
  margin: 0 auto;
  padding-top: 20px;
}
div.radio-holder {
  padding: 10px;
}
input[type="radio"] {
 display:none;
 &:checked+label {
  border-bottom: 2px solid #222222;
  padding-bottom: 0px;
 }
}

JQUERY

$(document).ready(function(){
  $("form input[type='radio']:checked + label").click(function(){
    $(this).prev().prop( "checked", false );
  });
});

Here a CodePen

But this isn't unchecking the radio button. I understand this is not standard functionality for radio buttons, but I need the user to be able to revert the set of radio buttons to their unselected state if desired, while also limiting them to selecting one from the set of options. Any help greatly appreciated.

Cheers

Mike

radio-button css html jquery javascript
2 Answers

To enable/disable same radio , You have to use event.preventDefault() to prevent default behavior ( enabling check box when clicking on label, so checked prop will be always set to true ) and make radio enable / disable grammatically as shown in the below snippet : 

$(document).ready(function(){
  $("label").click(function(e){
    e.preventDefault();
    $check = $(this).prev();
    if($check.prop('checked'))
      $check.prop( "checked", false );
    else 
      $check.prop( "checked", true );
      
    //console.log($check.prop("checked"));
  });
});
form {
  max-width: 500px;
  margin: 0 auto;
  padding-top: 20px;
}
div.radio-holder {
  padding: 10px;
}

input[type="radio"] {
 display:none;
}
input[type="radio"]:checked+label {
  border-bottom: 2px solid #222222;
  padding-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <h4>Where would you like to work?</h4>
  <div class="radio-holder">
    <input id="form1_areas1" name="areas" type="radio" value="area/london">
    <label for="form1_areas1">London</label>
  </div>
  <div class="radio-holder">
    <input id="form1_areas2" name="areas" type="radio" value="area/west-midlands">
    <label for="form1_areas2">West Midlands</label></div>
</form>

user_29324760

You could use next trick:
-Add a data-num attribute.
-Play with data-num on each click to check/uncheck the radio buttons.
Hope it helps:

$(document).ready(function(){
  $("input").click(function(){
       $("input").not(this).attr("data-num", 1); 
       var data = $(this).attr("data-num")
       if(data==1){
          data = 2
          $(this).attr("data-num", data); 
          return;
       }
       if(data==2){
          data = 1
          $(this).prop('checked', false);
          $(this).attr("data-num", data); 
          return;
       }
  })  
})
form {
  max-width: 500px;
  margin: 0 auto;
  padding-top: 20px;
}
div.radio-holder {
  padding: 10px;
}

input[type="radio"] {
 display:none;
}
input[type="radio"]:checked+label {
  border-bottom: 2px solid #222222;
  padding-bottom: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <h4>Where would you like to work?</h4>
  <div class="radio-holder">
    <input id="form1_areas1" name="areas" type="radio" value="area/london" data-num="1">
    <label for="form1_areas1">London</label>
  </div>
  <div class="radio-holder">
    <input id="form1_areas2" name="areas" type="radio" value="area/west-midlands" data-num="1">
    <label for="form1_areas2">West Midlands</label></div>
</form>

user_65421860
Related