Radio Input Check/Uncheck when clicked on label

Question

I am creating a customer preference section where the customer can select if he is interested in a fruit or not by clicking on one of two radio buttons. The problem is, I want to allow customer to leave his preference undefined on a fruit by allowing null radio button/uncheck the radio button when clicked again.

The JS is only adding classes to the radio buttons loaded via php with checked="checked" and adding a class to the parent label for CSS because on front end it appears as a button group as follows: I tried looking it up stack overflow but no solutions worked.

$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input').click(function() {
  $('input:not(:checked)').parent().removeClass("radio_checked");
  $('input:not(:checked)').removeAttr("checked");
  $('input:checked').parent().addClass("radio_checked");
});

#customer_preferences_form{
  margin-top: 50px;
  padding-right: 6.5%;
}
.container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{
    margin-left: 6.5%;
    margin-top: 20px;
    width: 43.5%;
    float: left;
    border: 1px solid grey !important;
    border-radius: 6px;
    padding: 0 !important;
    overflow: hidden;
}
.field_title{
  border-bottom: 1px solid grey !important;
    margin: 0 !important;
    padding: 5px 15px;
    display: inline-block;
    width: 100%;
    float: left;
}
.field_title label{
      text-align: center;
    font-size: 18px!important;
    font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display:inline-block;
cursor: default !important;
}
#customer_preferences_form label{
  width: 50%;
  display: inline-block;
  float: left;
  text-align: center;
  padding: 5px 0px;
  cursor: pointer;
}
#customer_preferences_form label:nth-child(2){
  border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"]{
  display:none;
}
#customer_preferences_form .radio_checked{
    color: #00d8a9;
    background: #FAFAFA;
    font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
  <div class="field_title">
    <label>Mango</label>
  </div>
  <label>
    <input type="radio" name="mango" value="1"> Not Interested
  </label>
  <label>
    <input type="radio" name="mango" value="2"> My Fav!
  </label>
</div>
<div class="container_pineapple">
  <div class="field_title">
    <label>Pineapple</label>
  </div>
  <label>
    <input type="radio" name="pineapple" value="1" checked="checked"> Not Interested
  </label>
  <label>
    <input type="radio" name="pineapple" value="2"> My Fav!
  </label>
</div>

Answer 1

Check this out it's working.

$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
$('input').click(function() {
  $('input:not(:checked)').parent().removeClass("radio_checked");
  $('input:not(:checked)').parent().removeClass("selected");
  $('input:not(:checked)').removeAttr("checked");
  $('input:checked').parent().addClass("radio_checked");
  $('input:checked').parent().addClass("selected");
});
$('input[type=radio]').hide();

#customer_preferences_form {
  margin-top: 50px;
  padding-right: 6.5%;
}

.container_banana,
.container_apple,
.container_guava,
.container_strawberry,
.container_pineapple,
.container_mango {
  margin-left: 6.5%;
  margin-top: 20px;
  width: 43.5%;
  float: left;
  border: 1px solid grey !important;
  border-radius: 6px;
  padding: 0 !important;
  overflow: hidden;
}

.field_title {
  border-bottom: 1px solid grey !important;
  margin: 0 !important;
  padding: 5px 15px;
  display: inline-block;
  width: 100%;
  float: left;
}

.field_title label {
  text-align: center;
  font-size: 18px!important;
  font-weight: normal!important;
  margin: 0 0 3px;
  width: 100% !important;
  display: inline-block;
  cursor: default !important;
}

#customer_preferences_form label {
  width: 50%;
  display: inline-block;
  float: left;
  text-align: center;
  padding: 5px 0px;
  cursor: pointer;
}

#customer_preferences_form label:nth-child(2) {
  border-right: 1px solid black;
}

#customer_preferences_form input[type="radio"] {
  display: none;
}

#customer_preferences_form .radio_checked {
  color: #00d8a9;
  background: #FAFAFA;
  font-weight: bold;
}

.selected {
  background-color: #ffb3b3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
  <div class="field_title">
    <label>Mango</label>
  </div>
  <label>
    <input type="radio" name="mango" value="1"> Not Interested
  </label>
  <label>
    <input type="radio" name="mango" value="2"> My Fav!
  </label>
</div>
<div class="container_pineapple">
  <div class="field_title">
    <label>Pineapple</label>
  </div>
  <label>
    <input type="radio" name="pineapple" value="1"> Not Interested
  </label>
  <label>
    <input type="radio" name="pineapple" value="2"> My Fav!
  </label>
</div>

UPDATE : If you want to uncheck radio button if clicked again. Check below snippet

$('input:not(:checked)').parent().removeClass("radio_checked");
$('input:not(:checked)').parent().removeClass("selected");
$('input:not(:checked)').removeAttr("checked");
$('input:checked').parent().addClass("radio_checked");
$('input:checked').parent().addClass("selected");
$('input:not(:checked)').parent().removeClass("radio_checked");
$('input[type=radio]').hide();
if ($('input:checked').is(':checked')) {
  $('input:checked').prop('checked', true);
  $('input:checked').data('waschecked', true);
}


$('input[type="radio"]').click(function() {
  var $radio = $(this);

  // if this was previously checked
  if ($radio.data('waschecked') == true) {
    $radio.prop('checked', false);
    $radio.data('waschecked', false);
    $radio.parent().removeClass("selected");
  } else {
    $radio.prop('checked', true);
    $radio.data('waschecked', true);
    $radio.parent().addClass("selected");
  }

  $radio.parent().siblings('label').children('input[type="radio"]').data('waschecked', false);
  $radio.parent().siblings('label').removeClass("selected");
});

#customer_preferences_form {
  margin-top: 50px;
  padding-right: 6.5%;
}

.container_banana,
.container_apple,
.container_guava,
.container_strawberry,
.container_pineapple,
.container_mango {
  margin-left: 6.5%;
  margin-top: 20px;
  width: 43.5%;
  float: left;
  border: 1px solid grey !important;
  border-radius: 6px;
  padding: 0 !important;
  overflow: hidden;
}

.field_title {
  border-bottom: 1px solid grey !important;
  margin: 0 !important;
  padding: 5px 15px;
  display: inline-block;
  width: 100%;
  float: left;
}

.field_title label {
  text-align: center;
  font-size: 18px!important;
  font-weight: normal!important;
  margin: 0 0 3px;
  width: 100% !important;
  display: inline-block;
  cursor: default !important;
}

#customer_preferences_form label {
  width: 50%;
  display: inline-block;
  float: left;
  text-align: center;
  padding: 5px 0px;
  cursor: pointer;
}

#customer_preferences_form label:nth-child(2) {
  border-right: 1px solid black;
}

#customer_preferences_form input[type="radio"] {
  display: none;
}

#customer_preferences_form .radio_checked {
  color: #00d8a9;
  background: #FAFAFA;
  font-weight: bold;
}

.selected {
  background-color: #ffb3b3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container_mango">
  <div class="field_title">
    <label>Mango</label>
  </div>
  <label>
    <input type="radio" name="mango" value="1" > Not Interested
  </label>
  <label>
    <input type="radio" name="mango" value="2" checked="checked"> My Fav!
  </label>
</div>
<div class="container_pineapple">
  <div class="field_title">
    <label>Pineapple</label>
  </div>
  <label>
    <input type="radio" name="pineapple" value="1"> Not Interested
  </label>
  <label>
    <input type="radio" name="pineapple" value="2"> My Fav!
  </label>
</div>

UPDATE 2: Fixed the bug in snippet 2 reported by Junaid Saleem

Answer 2

What you have is all a bit less than optimal.

First off you should give your inputs a class to not get all your inputs in scope, but we will ignore that for now but WILL give it a proper type and anchor it to a NEW div I added with the ID not in the original.

Do NOT remove or try to add the checked attribute, it happens on change automatically and doing it will prevent resetting it. Use .prop() instead if needed.

One issue you need is that you need to find the siblings of the radio that changed and set those - they will "unset/change" - radios are single of a group BUT the change event will not fire in "unset" cases hooked this way. You COULD give them ALL a class and anchor to that but I present a solution without that extra in the markup.

Don't use the click event, use change, (what if it changes via script?)

$('#customer_preferences_form')
 .on('click','label', function(event){
      event.preventDefault();
      event.stopImmediatePropagation();
      var myradio = $(this).find('input[type=radio]');
      var isChecked = myradio.is(":checked");
      myradio.prop("checked",!isChecked );
      myradio.trigger('setlabelstate');
  });
 $('#customer_preferences_form')
 .on('change setlabelstate','input[type=radio]',function() {
    // I used the label here to prevent the DIV sibling with title from
    // having that class added - only the label siblings are needed.
    var mySiblings = $(this).parent('label').siblings('label');
    var radios = $(this).parent('label')
        .add(mySiblings );
    radios.each(function(){
        var isChecked = $(this).find('input[type=radio]').is(":checked");
        $(this).toggleClass("radio_checked", isChecked );
    });
});
 
// custom event to set that initial state
$('#customer_preferences_form')
.find('input[type=radio]')
.trigger('setlabelstate');

#customer_preferences_form{
  margin-top: 50px;
  padding-right: 6.5%;
}
.container_banana, .container_apple, .container_guava, .container_strawberry, .container_pineapple, .container_mango{
    margin-left: 6.5%;
    margin-top: 20px;
    width: 43.5%;
    float: left;
    border: 1px solid grey !important;
    border-radius: 6px;
    padding: 0 !important;
    overflow: hidden;
}
.field_title{
  border-bottom: 1px solid grey !important;
    margin: 0 !important;
    padding: 5px 15px;
    display: inline-block;
    width: 100%;
    float: left;
}
.field_title label{
      text-align: center;
    font-size: 18px!important;
    font-weight: normal!important;
margin: 0 0 3px;
width: 100% !important;
display:inline-block;
cursor: default !important;
}
#customer_preferences_form label{
  width: 50%;
  display: inline-block;
  float: left;
  text-align: center;
  padding: 5px 0px;
  cursor: pointer;
}
#customer_preferences_form label:nth-child(2){
  border-right: 1px solid black;
}
#customer_preferences_form input[type="radio"]{
  display:none;
}
#customer_preferences_form label.radio_checked{
    color: #00d8a9;
    background: #FAFAFA;
    font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="customer_preferences_form">
  <div class="container_mango">
    <div class="field_title">
      <label>Mango</label>
    </div>
    <label>
      <input type="radio" name="mango" value="1"> Not Interested
    </label>
    <label>
      <input type="radio" name="mango" value="2"> My Fav!
    </label>
  </div>
  <div class="container_pineapple">
    <div class="field_title">
      <label>Pineapple</label>
    </div>
    <label>
      <input type="radio" name="pineapple" value="1" checked="checked"> Not Interested
    </label>
    <label>
      <input type="radio" name="pineapple" value="2"> My Fav!
    </label>
  </div>
</div>