我有一个共同的问题,但有一个独特的转折。我有一个复选框列表。对于每个复选框,我想隐藏/显示一个或多个div。像这样的东西 - 如果我选中复选框1,则div 1显示。如果我选中复选框2,则显示div 2。如果我选中复选框3,则显示div 1和2。这是扭曲,如果我选择复选框1和3,然后取消选中3,我希望div 1保持可见。代码将是这样的(只有1和2个复选框工作) -
<input type="checkbox" name="1">1
<input type="checkbox" name="1">1
<input type="checkbox" name="2">2
<input type="checkbox" name="2">2
<input type="checkbox" name="???">1&2
<div id="showme1" style="display: none">Show me1</div>
<div id="showme2" style="display: none">Show me2</div>
<script type="text/javascript">
var MyCheckboxes1=$("input[name='1']");
MyCheckboxes1.change(function() {
$("#showme1").toggle(MyCheckboxes1.is(":checked"));
});
var MyCheckboxes2=$("input[name='2']");
MyCheckboxes2.change(function() {
$("#showme2").toggle(MyCheckboxes2.is(":checked"));
});
</script>
答案 0 :(得分:1)
如何做这样的事情,简单的逻辑,根据是否勾选复选框使用if else语句:http://jsfiddle.net/qvhpfzs7/
<input type="checkbox" id="c1"/> show Div 1
<br/>
<input type="checkbox" id="c2"/> show Div 2
<br/>
<input type="checkbox" id="c3"/> show Div 1 AND Div 2
<br/><br/>
<div class="div1">THIS IS THE CONTENT OF DIV 1</div>
<div class="div2">THIS IS THE CONTENT OF DIV 2</div>
$(document).ready(function(){
$('.div1').hide();
$('.div2').hide();
var d1 = false;
var d2 = false;
$('input[type="checkbox"]').on('change', function(){
if ($('#c1').is(':checked')) { d1 = true; }
else { d1 = false; }
if ($('#c2').is(':checked')) { d2 = true; }
else { d2 = false; }
if ($('#c3').is(':checked')) {
d1 = true;
d2 = true;
}
if (d1) { $('.div1').show(); } else { $('.div1').hide(); }
if (d2) { $('.div2').show(); } else { $('.div2').hide(); }
});
});
答案 1 :(得分:0)
好的,经过一些游戏,以及一位名叫Brian的朋友和brainiac的想法,这就是我提出的解决方案。一旦我想到它就很简单。
HTML-
<div id="showme1" style="display: none">Show me1</div>
<div id="showme2" style="display: none">Show me2</div>
JS -
var MyCheckboxes1=$("input[class='1']");
MyCheckboxes1.change(function() {
$("#showme1").toggle(MyCheckboxes1.is(":checked") || MyCheckboxes12.is(":checked"));
});
var MyCheckboxes2=$("input[class='2']");
MyCheckboxes2.change(function() {
$("#showme2").toggle(MyCheckboxes2.is(":checked") || MyCheckboxes12.is(":checked"));
});
var MyCheckboxes12=$("input[class='12']");
MyCheckboxes12.change(function() {
$("#showme1").toggle(MyCheckboxes1.is(":checked") || MyCheckboxes12.is(":checked"));
$("#showme2").toggle(MyCheckboxes2.is(":checked") || MyCheckboxes12.is(":checked"));
});
答案 2 :(得分:0)
好吧,这就是我所拥有的。请检查以下代码
<input type="checkbox" name="1">1
<input type="checkbox" name="1">1
<input type="checkbox" name="2">2
<input type="checkbox" name="2">2
<!-- <input type="checkbox" name="???">1&2 -->
<input type="checkbox" name="3">3
<div id="showme1" style="display: none">Show me1</div>
<div id="showme2" style="display: none">Show me2</div>
<script>
var MyCheckboxes1=$("input[name='1']");
MyCheckboxes1.change(function() {
$("#showme1").toggle(MyCheckboxes1.is(":checked"));
});
var MyCheckboxes2=$("input[name='2']");
MyCheckboxes2.change(function() {
$("#showme2").toggle(MyCheckboxes2.is(":checked"));
});
var MyCheckboxes3=$("input[name='3']");
MyCheckboxes3.change(function() {
<!-- for checkbox 3 I just toggled showme 1 & 2 -->
$("#showme1").toggle();
$("#showme2").toggle();
});
</script>
如果选择1和3,则取消选中3,然后仍然可以看到1。
答案 3 :(得分:0)
这是我尝试过的。希望这会有所帮助。
JavaScript -
function handleClick(cb) {
if(cb.checked==true){
if(cb.name==3){ // Show both div
$('#showme1').show();
$('#showme2').show();
}else{
$('#showme'+cb.name).show();
}
}else{
if(cb.name==3){ // Show both div
$('#showme1').hide();
$('#showme2').hide();
}else{
$('#showme'+cb.name).hide();
}
}
}
HTML -
<input type="checkbox" name="1" onclick='handleClick(this);'>1
<input type="checkbox" name="1" onclick='handleClick(this);'>1
<input type="checkbox" name="2" onclick='handleClick(this);'>2
<input type="checkbox" name="2" onclick='handleClick(this);'>2
<input type="checkbox" name="3" onclick='handleClick(this);'>3
<div id="showme1" style="display: none">Show me1</div>
<div id="showme2" style="display: none">Show me2</div>
最初显示div时,您也可以使用toggle()。