CODEWITHSUNDEEP
jquerycss
Raj
Raj

Reputation: 193

To hide and display DIV if Radio button is checked

I want to display DIV having class 'checkboxClass' only if radio button is checked that is inside DIV having class 'radioClass'.

My current code is displaying all the DIV elements that have class 'checkboxClass' when any Radio button is checked.

If radio button inside specific 'mainSection' class is checked then I want to display all DIV that have class 'checkboxClass' inside that 'mainSection' otherwise it should be hidden.

$('.radioClass input:radio').bind('click touch', function() {
  if ($(this).is(":checked")) {
    $('.checkboxClass').css("display", "block");
  } else {
    $('.checkboxClass').css("display", "none");
  }
});
.checkboxClass {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<div class="mainSection" style="border:solid 1px #aaa">
  <div class="radioClass">
    <input type="radio" name="xyz" value="xyz">
  </div>
  <div class="checkboxClass"><input type="checkbox"></div>
  <div class="checkboxClass"><input type="checkbox"></div>
  <div class="checkboxClass"><input type="checkbox"></div>
</div>
<br />
<div class="mainSection" style="border:solid 1px #aaa">
  <div class="radioClass">
    <input type="radio" name="xyz" value="xyz">
  </div>
  <div class="checkboxClass"><input type="checkbox"></div>
  <div class="checkboxClass"><input type="checkbox"></div>
  <div class="checkboxClass"><input type="checkbox"></div>
</div>

Upvotes: 0

Views: 1105

Answers (3)

Mark Wilson
Mark Wilson

Reputation: 1354

Use closest() and find() method

 $('.radioClass input:radio').bind('click touch', function () {
            if($(this).is(":checked"))
            {    
                $(this).closest('.mainSection').find('.checkboxClass').css("display", "block");
            }
            else {
                $(this).closest('.mainSection').find('.checkboxClass').css("display", "none");
}
        });

Or use siblings() of parent()

 $('.radioClass input:radio').bind('click touch', function () {
            if($(this).is(":checked"))
            {    
                $(this).parent().siblings('.checkboxClass').css("display", "block");
            }
            else {
                $(this).parent().siblings('.checkboxClass').css("display", "none");
}
        });

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You need to travese up to mainSection using .closest() then target checkboxClass and perform the desired operation.

$('.radioClass input:radio').bind('click touch', function() {
     var mainSection = $(this).closest('.mainSection');
     mainSection.find('.checkboxClass').toggle(this.checked);

     //Hide others
     $('.mainSection').not(mainSection).find('.checkboxClass').hide();
});


jQuery(function($) {
  $('.radioClass input:radio').on('click', function() {
    var mainSection = $(this).closest('.mainSection');
    mainSection.find('.checkboxClass').toggle(this.checked);
    
    //Hide others
    $('.mainSection').not(mainSection).find('.checkboxClass').hide();
  });
})
.checkboxClass {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainSection">
  <div class="radioClass">
    <input type="radio" name="xyz" value="1">1
  </div>
  <div class="checkboxClass">checkboxClass in 1</div>
  <div class="checkboxClass">checkboxClass in 1</div>
  <div class="checkboxClass">checkboxClass in 1</div>
</div>

<div class="mainSection">
  <div class="radioClass">
    <input type="radio" name="xyz" value="2">2
  </div>
  <div class="checkboxClass">checkboxClass in 2</div>
  <div class="checkboxClass">checkboxClass in 2</div>
  <div class="checkboxClass">checkboxClass in 2</div>
</div>

Upvotes: 0

Mohit Tanwani
Mohit Tanwani

Reputation: 6628

Firstly, Use parent child selector $('.mainSection .radioClass input:radio')

And to find specific check-boxes traverse upto the parents $(this).parents('.mainSection').find('.checkboxClass')

$('.mainSection .radioClass input:radio').bind('click touch', function () {
  
  $('.checkboxClass').css("display", "none");
            if($(this).is(":checked"))
            {
                $(this).parents('.mainSection').find('.checkboxClass').css("display", "block");
            }
            else {
                $(this).parents('.mainSection').find('.checkboxClass').css("display", "none");
}
        });
.checkboxClass
{

   display:none; 

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainSection">

<div class="radioClass">
<input type="radio" name="xyz" value="xyz" >Number</div>
<div class="checkboxClass">123</div>
<div class="checkboxClass">456</div>
<div class="checkboxClass">789</div>


</div>

<div class="mainSection">

<div class="radioClass">
<input type="radio" name="xyz" value="xyz" >Characters
</div>

<div class="checkboxClass">ABC</div>
<div class="checkboxClass">XYZ</div>
<div class="checkboxClass">PQR</div>

</div>

Upvotes: 1

Related Questions