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

Question

我想显示DIV有类'checkboxClass‘只有当单选按钮被选中，是在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();
});

​

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>

​

Answer 3

使用最近()和查找()方法

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

或者使用兄弟姐妹() of 家长()

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