使用单选按钮显示/隐藏相同类别的多个DIV

Question

我在页面上分布了一系列DIV。如何在顶部使用一组单选按钮隐藏/显示页面上具有相同类的所有DIV？

<form>
  <input type="radio" name="csr_selector" id="csSelectorShow" value="1" />
  <label for="csSelectorShow">Show</label>
  <input type="radio" name="csr_selector" id="csSelectorHideAll" value="2" checked="checked"/>
  <label for="csSelectorHideAll">Hide</label>
</form>

<div id="cs1" class="csSelectorShow">
  <p>Script 1</p>
</div>

<div id="cs2" class="csSelectorShow">
  <p>Script 2</p>
</div>

<div id="cs3" class="csSelectorShow">
  <p>Script 3</p>
</div>

Answer 1

您可以使用demand_dirty定位所需的单选按钮和div，以便可以将事件附加到单选按钮并根据单选按钮的值显示/隐藏div。

querySelectorAll()

var rad = document.querySelectorAll('[name=csr_selector]'); //get both radio button
var div = document.querySelectorAll('.csSelectorShow'); //get all div with the class
rad.forEach(function(r){
  r.addEventListener('change', function(){ 
    if(this.value == "1")
      div.forEach(d => d.style.display='block');
    else
      div.forEach(d => d.style.display='none');
  });
});

.csSelectorShow{
  display: none;
}

由于您已经通过添加jQuery标签更新了问题，因此以下是使用<form> <input type="radio" name="csr_selector" id="csSelectorShow" value="1"/> <label for="csSelectorShow">Show</label> <input type="radio" name="csr_selector" id="csSelectorHideAll" value="2" checked="checked"/> <label for="csSelectorHideAll">Hide</label> </form> <div id="cs1" class="csSelectorShow"> <p>Script 1</p> </div> <div id="cs2" class="csSelectorShow"> <p>Script 2</p> </div> <div id="cs3" class="csSelectorShow"> <p>Script 3</p> </div>的jQuery解决方案：

toggle()

$('[name=csr_selector]').change(function(){
  $('.csSelectorShow').each(function(){
    $(this).toggle();
  });
});

.csSelectorShow{
  display: none;
}

Answer 2

有很多方法可以解决您的问题，我更喜欢这种方法，它很容易理解。

 $(function(){
            $('.csSelectorShow').hide();
              $('input:radio').change(function(){
                if($(this).val()==1){
                     $('.csSelectorShow').show();
                }else if($(this).val()==2){
                                $('.csSelectorShow').hide();

                }
              })            
        })

.csSelectorShow{
 display:none; 
}

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

<form>
  <input type="radio" name="csr_selector" id="csSelectorShow" value="1" />
  <label for="csSelectorShow">Show</label>
  <input type="radio" name="csr_selector" id="csSelectorHideAll" value="2" checked="checked"/>
  <label for="csSelectorHideAll">Hide</label>
</form>

<div id="cs1" class="csSelectorShow">
  <p>Script 1</p>
</div>

<div id="cs2" class="csSelectorShow">
  <p>Script 2</p>
</div>

<div id="cs3" class="csSelectorShow">
  <p>Script 3</p>
</div>

Answer 3

HTML代码：

<form>
<input type="radio" name="csr_selector" id="csSelectorShowHide" value="1" />
<label for="csSelectorShow">Show/Hide</label>
</form>
<div>
	<div id="cs1" class="csSelectorShow">
		<p>Script 1</p>
	</div>
	<div id="cs2" class="csSelectorShow">
		<p>Script 2</p>
	</div>
	<div id="cs3" class="csSelectorShow">
		<p>Script 3</p>
	</div>
</div>

jQuery代码：

$( document ).ready(function() {
    $('#csSelectorShowHide').click(function(){
    	$('.csSelectorShow').toggle();
    });
});