2

次のフォーム：

    <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>

からのサブスクリプションの最初の部分です。ここでは、ユーザーは1か月または2か月のサブスクリプションを選択できます。

ユーザーが追加を受け取ることに同意した場合は、チェックボックスをオンのままにします。これですべてです。ユーザーは次のボタンを押すことができ、問題ありません。

ただし、ユーザーが[追加あり]チェックボックスをオフにすると、価格の異なる別のラジオボタンのセットを含む#radioButtonsWithAddsの代わりにdivが表示されます。

送信ボタンを押さずにチェックボックスが表示されていることを検出するにはどうすればよいですか？

4

5 に答える 5

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

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

   }

});
于 2011-01-27T12:20:09.003 に答える
2

次のようなこともできます。

$('input[name=subscribe]').change(function() {
   if ($(this).is(':checked')) {
     // the user selected the checkbox
   } else {
     // the user de-selected the checkbox
   }
});
于 2012-11-09T16:43:01.270 に答える
1

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

簡単な例を次に示します: http://jsfiddle.net/efhHF/2/

于 2011-01-27T12:24:18.727 に答える
0

イベントリスナーをバインドし、そこで状態を確認する必要があります。

$('#radioButtonsWithAdds').find('input:checkbox').bind('change', function() {
    if(this.checked) {
    }
    else {
         // the user unchecked the checkbox!
    }
});
于 2011-01-27T12:21:47.137 に答える
0

これを使ってみてください 

          <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>

ここにJS関数があります

function mostra(){
    if (document.getElementById("sumula").style.display != "none"){
        document.getElementById("sumula").style.display = "none";
    }else{
        document.getElementById("sumula").style.display = "block";
    }
}
于 2011-01-27T12:22:56.373 に答える