How to detect that a user has unchecked a checkbox?
The following form:
<form action="x.php" method="get" id="myForm">Subscribe:
<div id="radioButtonsWithAdds">
<input type="radio" name="group1" value="one">One month 2,99$
<input type="radio" name="group1" value="two"> Two months 5,98$</div><br>
<input type="checkbox" name="option1" value="withAdds" checked> with adds
<img src="next.png" border="0" alt="enviar" onclick="document.getElementById('myForm').submit();">
</form>
Is the first part of a subscription from. In here, the user may choose between one month or two months subscription.
If the user agrees to receive adds, leaves the checkbox checked, that will be all, he/she can hit the next button and it's ok.
But if the user unchecks the "with adds" checkbox, a div will show in the place of the #radioButtonsWithAdds one containing another set of radio buttons with different prices.
How can I detect that the checkbox ish without hitting a开发者_运维问答ny submit button?
$('#yourcheckbox').change(function() {
if ( ! this.checked) {
// It is not checked, show your div...
}
});
You could also do something like this:
$('input[name=subscribe]').change(function() {
if ($(this).is(':checked')) {
// the user selected the checkbox
} else {
// the user de-selected the checkbox
}
});
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content="test"/>
<title></title>
</head>
<body>
<form action="x.php" method="get" id="myForm" name="myForm">
Subscribe:
<div id="radioButtonsWithOutAdds" style="display:none;">
<input type="radio" name="group1" value="one">One month 1,99$
<input type="radio" name="group1" value="two"> Two months 2,98$
</div>
<div id="radioButtonsWithAdds">
<input type="radio" name="group1" value="one">One month 2,99$
<input type="radio" name="group1" value="two"> Two months 5,98$
</div><br>
<input type="checkbox" name="option1" value="withAdds" checked> with adds
<img src="next.png" border="0" alt="enviar" onclick=
"document.getElementById('myForm').submit();">
</form>
</body>
</html>
JS
$(document).ready(function(){
$("#myForm > input[type='checkbox']").click(function(){
if(!$(this).is(':checked'))
{
$("#radioButtonsWithOutAdds").show();
$("#radioButtonsWithAdds").hide();
}
else
{
$("#radioButtonsWithOutAdds").hide();
$("#radioButtonsWithAdds").show();
}
})
})
Here is a quick example: http://jsfiddle.net/efhHF/2/
You need to bind an event listener and check the state there.
$('#radioButtonsWithAdds').find('input:checkbox').bind('change', function() {
if(this.checked) {
}
else {
// the user unchecked the checkbox!
}
});
Try to use this
<TD width=550 align=left>
<input type="checkbox" name="adesao" value="sim" id="parte1" onClick="mostra()" /> Sim
<div id="sumula" style="display:none">
<input type="radio" name="conteudo_sumula" value="1" /> <small><i>1x</i></small>
<input type="radio" name="conteudo_sumula" value="2" /> <small><i>2x</i></small>
<input type="radio" name="conteudo_sumula" value="3" /> <small><i>3x</i></small>
</div>
</TD>
Here goes the JS function
function mostra(){
if (document.getElementById("sumula").style.display != "none"){
document.getElementById("sumula").style.display = "none";
}else{
document.getElementById("sumula").style.display = "block";
}
}
加载中,请稍侯......
精彩评论