3

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

Improve this question
1
  • Sorry for late reply as I was outstation after I asked this question. I really thank to all of you who have ever helped me, made me learn where I was wrong. I have read the entire conversation in this page. Thanks to all for this help. I know this by using custom radio btn css but for my project it's a bit worry so i chosen jquery for it. All the codes of @Asad, Reddy & Webeno's code also working are working but I have chosen Reddy's for simple chaining. I have updated my codepen codepen.io/amitabha197/pen/KzqvWv , Again thanks to everyone for your co-operation Commented Mar 27, 2016 at 15:06

4 Answers 4

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

29 Comments

@Reddy Like i said, you didn't read the question. He wants to ADD the class to the newly checked radio button parent, and he wants to REMOVE the class from all of the other (unchecked) radio button parents. His logic is correct, he just needed to throw it in an iterator over all of the radio buttons
@Reddy you're stuck at your idea of the OP wanting to uncheck the radio button - that's not what they want. They simply want a class to be added to the checked radio button, so one would always be checked, actually... and by the way, with radio buttons, there will always be some, if not more, unselected (if one is selected)... ;)
@Reddy "I want to add a class in the parent wrapper of radio button (...) I want to remove the class new when the radio button is not checked" - what is unclear here?
@Reddy Because the OP is obviously new to jQuery and doesn't fully understand how to approach the issue, which is why they posted the question.. OP's expressed needs > their code
@webeno you guys were right, I understood that after I saw his codepen. If not for that I would have sat down for an argument for another few hours :D
|
0

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

1 Comment

is there problem with this @Amitabha ?
0

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

1 Comment

But then $('input[type="radio"][name="'+name+'"]:checked') will always be equal to $(this) as this is the one which is checked and has triggered the event.
0

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>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.