如果选中单选按钮，则隐藏和显示DIV

Question

我想显示具有类'checkboxClass'的DIV，只有在选中了具有类'radioClass'的DIV内的单选按钮时才会显示。

我的当前代码在选中任何单选按钮时显示所有具有类“checkboxClass”的DIV元素。

如果选中特定'mainSection'类中的单选按钮，那么我想在'mainSection'中显示所有具有'checkboxClass'类的DIV，否则它应该被隐藏。

$('.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>

Answer 1

首先，使用parent child选择器$('.mainSection .radioClass input:radio')

并找到特定的复选框遍历父母$(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>

Answer 2

您需要使用最多mainSection .closest()然后定位checkboxClass并执行所需的操作。

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

＆＃13;

＆＃13;

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

＆＃13;

.checkboxClass {display:none}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用closest()和find()方法

 $('.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");
}
        });

或使用siblings()

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