我有一个要求,即我有多个复选框。
我有一组与复选框相关的内容,位于 <p>
中标签。
当页面加载所有<p>
时将显示标签相关内容。
当用户选择任何复选框后
那么只有与复选框相关的内容才会显示,其余内容将隐藏。
接下来,当用户选择第二个复选框时,将显示第二个复选框相关内容。
下面是<p>
像这样的标签内容我有 20 <p>
标签
<p id="sb1">Checkbox content one</p>
<p id="sb2">Checkbox content two</p>
<input name="chk1" type="checkbox" id="chk1" value="">chekme1
<input name="chk2" type="checkbox" id="chk2" value="">checkme2
这是我的代码
$(document).ready(function()
{
if($(this).prop('checked'))
{
$('#chk1').prop('checked', true);
$("#sb2,#sb3,#sb4,#sb5,#sb6,#sb7,#sb8,#sb9,#sb10").hide();
}
else
{
$('#chk2').prop('checked', false);
$("#sb1,#sb3,#sb4,#sb5,#sb6,#sb7,#sb8,#sb9,#sb10").show();
}
});
有人可以帮帮我吗,像这样我有 20 个复选框和 20 <p>
标签,我尝试了很多方法。
请在这方面帮助我,任何帮助将不胜感激..
最佳答案
HTML
<p id="sb1" class="p_element">Checkbox content one</p>
<p id="sb2" class="p_element">Checkbox content two</p>
<input name="chk1" class="check_box" type="checkbox" data-ptag="sb1" id="chk1" value="">chekme1
<input name="chk2" class="check_box" type="checkbox" data-ptag="sb2" id="chk2" value="">checkme2
jQuery
$('.check_box').change(function(){
if($('.check_box:checked').length==0){
$('.p_element').show(); //Show all,when nothing is checked
}else{
$('.p_element').hide();
$('.check_box:checked').each(function(){
$('#'+$(this).attr('data-ptag')).show();
});
}
});
关于jquery - 如何显示或隐藏带有多个复选框的多个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25681862/