输入类型单选按钮检查else语句不在jquery中工作

Question

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. eg http://codepen.io/amitabha197/pen/KzqvWv

Answer 1

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

Answer 2

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");
  });
});

Answer 3

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');
  });
});

Answer 4

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>