我在页面上分布了一系列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>
答案 0 :(得分: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;
}
答案 1 :(得分:1)
有很多方法可以解决您的问题,我更喜欢这种方法,它很容易理解。
$(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>
答案 2 :(得分:0)
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();
});
});