How to detect that a user has unchecked a checkbox?

StackOverflow https://stackoverflow.com/questions/4816145

Question

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?

Was it helpful?

Solution 

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

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

   }

});

OTHER TIPS

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 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";
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top