CODEWITHSUNDEEP
javascriptjqueryhtml
Ruben Kretek
Ruben Kretek

Reputation: 55

Adding a class to a parent(with a specific class) of a radio button when that button is checked

I need to add a class of a div (a few elements up the DOM) with the class '.add-class-here' when the radio button is clicked.

There are three of those so I also need a way to make sure only the parent div of that particular radio is changed.

I have the following code:

$(document).ready(function() {

    $("input[type='radio']").click(function() {
        if (!$("input[type='radio']").val()) {
           console.log('Nothing is checked!');
            return false;
        }
        else {
          $(".add-class-here").addClass("radio-checked");
        }
    });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-class-here">
  <div class="radio1">
    <label><input type="radio"> Radio button 1</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio2">
    <label><input type="radio"> Radio button 2</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio3">
    <label><input type="radio"> Radio button 3</label>
  </div>
</div>

I have tried the following but this adds the class to all 3 elements with the class 'add-class-here' This also, displays the console log message twice

Upvotes: 2

Views: 74

Answers (4)

Nitheesh
Nitheesh

Reputation: 20006

Check this. Add a name attribute to the radio elements. On change if there is a value present, add the class using the selector.

$(document).ready(function() {

  $("input[type='radio']").click(function(event) {
      $(".add-class-here").removeClass("radio-checked");
      if (!this.value) {
        console.log('Nothing is checked!');
        return false;
      }
      else {
        event.target.closest('div[class^="add-class-here"]').className += " radio-checked";
      }
  });

});
.radio-checked {
    border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="add-class-here">
  <div class="radio1">
    <label><input type="radio" value="1" name="radioitem"> Radio button 1</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio2">
    <label><input type="radio" value="2" name="radioitem"> Radio button 2</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio3">
    <label><input type="radio" value="3" name="radioitem"> Radio button 3</label>
  </div>
</div>

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can use below code.

  1. First create group of radio button by adding name to each radio button so that only one will be selected at a time from the radio button group

  2. on click event handler, you don't need to check the value as whenever you click on radio button it will be selected only and you cannot de-select it

  3. remove class from all div first and then add to the parent div of selected radio

$(document).ready(function() {

    $("input[type='radio']").on('click', function() {
        //remove all classess
        $(".add-class-here").removeClass("radio-checked");
        //add class to the parent of clicked radio button
        $(this).closest(".add-class-here").addClass("radio-checked");
    });

});
.radio-checked {
  background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-class-here">
  <div class="radio1">
    <label><input type="radio" name="radio-group"> Radio button 1</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio2">
    <label><input type="radio"  name="radio-group"> Radio button 2</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio3">
    <label><input type="radio"  name="radio-group"> Radio button 3</label>
  </div>
</div>

Upvotes: 0

Omi
Omi

Reputation: 4007

You can use parents() method

$(document).ready(function() {

  $("input[type='radio']").click(function() {
    if ($(this).prop('checked')) {
    
      $(this).parents('.add-class-here').addClass("radio-checked");
    }else{
    
      $(this).parents('.add-class-here').removeClass("radio-checked");
    }
  });

});
.radio-checked {
color:blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-class-here">
  <div class="radio1">
    <label><input type="radio"> Radio button 1</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio2">
    <label><input type="radio"> Radio button 2</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio3">
    <label><input type="radio"> Radio button 3</label>
  </div>
</div>

Upvotes: 0

Akash Shrivastava
Akash Shrivastava

Reputation: 1365

Use jQuery closest method.

$(".add-class-here").addClass("radio-checked") will add class to all elements with add-class-here class available in current document.

$(e.target).closest(".add-class-here").addClass("radio-checked") will only add class to the closest add-class-here element to e.target element (i.e. the radio button that's clicked).

$(document).ready(function() {
    $("input[type='radio']").click(function(e) {
        if (!$("input[type='radio']").val()) {
           console.log('Nothing is checked!');
            return false;
        }
        else {
          // only the closest `add-class-here` element to the clicked radio button
          $(e.target).closest(".add-class-here").addClass("radio-checked");
        }
    });

});
.radio-checked {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="add-class-here">
  <div class="radio1">
    <label><input type="radio"> Radio button 1</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio2">
    <label><input type="radio"> Radio button 2</label>
  </div>
</div>

<div class="add-class-here">
  <div class="radio3">
    <label><input type="radio"> Radio button 3</label>
  </div>
</div>

Upvotes: 1

Related Questions