CODEWITHSUNDEEP
javascriptjqueryhtml
Amitabha Ghosh
Amitabha Ghosh

Reputation: 51

input type radio button checked else statement not working in jquery

I want to add a class in the parent wrapper of radio button, I did so , it is working but else statement is not workin

Here is my code

<div class="radio">
    <input type="radio" name="name[]" checked>
</div>

<div class="radio">
    <input type="radio" name="name[]">
</div>

This is my JS

$(document).ready(function(){
  $('input[type="radio"]').on('click',function(){
    if($(this).prop('checked')){
      $(this).parent().addClass('new')
    }
    else {
      $(this).parent().removeClass('new')
    }
  });
})

I want to remove the class new when the radio button is not checked, but it is not working. e.g. http://codepen.io/amitabha197/pen/KzqvWv

Upvotes: 3

Views: 859

Answers (4)

guest271314
guest271314

Reputation: 1

You can include <label> element as parent of <input type="radio"> elements at html.

The HTML Label Element (<label>) represents a caption for an item in a user interface. It can be associated with a control either by placing the control element inside the <label> element, or by using the for attribute. Such a control is called the labeled control of the label element. One input can be associated with multiple labels.

The parent label element will be associated with :checked first child descendant input.

You can style css :after pseudo element compounded to :checked selector to display blue border when input element is :checked. 

div.radio {
  display: inline-block;
}
label.radio {
  display: inline-block;
  width: 100px;
  border: 1px solid #000;
}
label.radio > :checked:after {
  content: "";
  position: relative;
  display: inline-block;
  width: 100px;
  height: 20px;
  left: -6px;
  top: -4px;
  border: 1px solid blue;
}
<div class="radio">
  <label class="radio">
    <input type="radio" id="radio1" name="name[]" checked>
  </label>
</div>
<div class="radio">
  <label class="radio">
    <input type="radio" for="radio2" name="name[]">
  </label>
</div>

If requirement is to use existing html, jQuery, you can utilize .click(), .toggleCLass() to add, remove "new" className if descendant input element checked property is false at click event, set input checked property to true 

$(document).ready(function() {
  var radio = $(".radio");
  radio.click(function(e) {
    var input = e.target.querySelector("input[type=radio]");
    if (!input.checked) {
      radio.toggleClass("new");
      input.checked = true;
    }
  })
})
.radio {
  display: inline-block;
  width: 100px;
  border: 1px solid #000;
}
.new {
  display: inline-block;
  width: 100px;
  border: 1px solid blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="radio new">
  <input type="radio" name="name[]" checked>
</div>

<div class="radio">
  <input type="radio" name="name[]">
</div>

Upvotes: 0

mhodges
mhodges

Reputation: 11116

Edited

For code optimization & modularity.

$(document).ready(function(){
  $('input[type="radio"]').on('click',function(){
    var name = $(this).attr("name");
    $('input[type="radio"][name="'+name+'"]').closest(".radio").removeClass("new");
    $(this).closest(".radio").addClass("new");
  });
});

Upvotes: 0

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18997

After webeno and mhodges pointed me to the right direction here is my solution.

  $('input[type="radio"]').on('change',function(){
    $(this).parent().addClass('new').siblings().removeClass('new');        
  });

Also point to remember, If at all you had been trying to uncheck a single radio button then know this.

You cannot uncheck a radio button. All the clicks you do on it will keep it checked, Use checkbox instead.

Why is it impossible to deselect HTML “radio” inputs?

Unable to uncheck radio button

Upvotes: 1

Asad
Asad

Reputation: 3160

use this function will solve you problem 

$(document).ready(function(){
  $('input[type="radio"]').on('change',function(){
    $(this).parent().addClass('new');
    $('input[type="radio"]').not(this).parent().removeClass('new');
  });
});

Upvotes: 0

Related Questions