问题
What I want to achieved is a way to show a div if 2 checkboxes are checked and show something else if only one is checked else if 3 checkboxes are checked show a different div once again. I'm trying to have a working version of it.... Any help?
Take a look to this example: http://jsfiddle.net/downloadtaky/FpF7T/
回答1:
Change the markup to
<table>
<tr>
<td><input type="checkbox" name="opzioni" data-grp="vano1gop1" value="van ass obb 1g op1" class="opzioni" />Opzione 1</td>
<td><input type="checkbox" name="opzioni" data-grp="vano1gop2,vano1gop3" value="van ass obb 1g op1" class="opzioni" />Opzione 2</td>
<td><input type="checkbox" name="opzioni" data-grp="vano1gop4" value="van ass obb 1g op1" class="opzioni" />Opzione 3</td>
</tr>
</table>
<div id="vano1gop1" class="vano1grp">Hai scelto l'opzione 1</div>
<div id="vano1gop2" class="vano1grp">Hai scelto l'opzione 2</div>
<div id="vano1gop3" class="vano1grp">Hai scelto l'opzione 3</div>
<div id="vano1gop4" class="vano1grp">Hai scelto l'opzione 4</div>
and then use the below JS
$(function(){
$('.opzioni').click(function(){
var checked = $(this).attr("checked");
var grps = $(this).data("grp").split(",");
$.each(grps, function(i, value){
var elem = $("#" + value);
checked ? elem.show() : elem.hide();
});
});
});
Demo
回答2:
function toggleContent(){
document.getElementById('divOne').style.display =
document.getElementById('divTwo').style.display = 'none';
if(document.getElementById('firstCheckbox').checked &&
document.getElementById('secondCheckbox').checked){
document.getElementById('divOne').style.display =
document.getElementById('divTwo').style.display'';
}
else if(document.getElementById('firstCheckbox').checked){
document.getElementById('divOne').style.display = '';
}
}
That should give you a good idea of how this is done. Try using http://jquery.com/ for simple hide/show things, very easy.
来源:https://stackoverflow.com/questions/6416315/show-div-if-2-specific-checkboxes-are-checked-if-only-one-checked-show-differen