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 any submit button?

$('#yourcheckbox').change(function() {

   if ( ! this.checked) {
       // It is not checked, show your div...

   }

});

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>

$(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 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
   }
});

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";
    }
}

来源：https://stackoverflow.com/questions/4816145/how-to-detect-that-a-user-has-unchecked-a-checkbox

标签

jquery

checkbox

form-submit

detect

unchecked