javascript - チェックボックスをオンにした後に表示するボタンを切り替え、チェックを外すと非表示になります

Question

以下に、PHPで構築している特定のアプリケーションのコードを示します。私の仕事はユーザーインターフェイスであり、これを機能させる方法に関するコードを探しました。

このフォームでは、Jquery UIの最新の更新を使用して、ボタンとチェックボックスをスタイル設定しています。チェックボックスをオンにするとボタンが表示され、チェックを外すとボタンが消える必要があります。

これに有効なコードを見つけることができず、私を半狂乱に駆り立て、遅れをとっています。

<form name="purpose" method="post" action="" >
    <div id="radiosetPURPOSE">
        <input type="checkbox" id="radio1" name="homework" value="homework" ><label for="radio1" style="font-size: 13pt; width: 130px; height: 40px;">Homework</label>
        <input type="checkbox" id="radio2" name="computer" value="computer" ><label for="radio2" style="font-size: 13pt; width: 130px; height: 40px;">Computer</label>
    </div>
    <br />
    <div id="radiosetPURPOSE2">
        <input type="checkbox" id="radio3" name="books" value="books" ><label for="radio3" style="font-size: 13pt; width: 130px; height: 40px;">Books</label>
        <input type="checkbox" id="radio4" name="reading" value="reading" ><label for="radio4" style="font-size: 13pt; width: 130px; height: 40px;">Reading</label>                     
    </div>
    <br />
        <div id="radiosetPURPOSE3">
        <input type="checkbox" id="radio5" name="tutoring" value="tutoring" ><label for="radio5" style="font-size: 13pt; width: 130px; height: 40px;">Tutoring</label>                     
    </div>
    <br  /><br  /><br  /><br  />
        <div id="btnCheckin" style="display:none">   
        <button id="btnCheckinBtn" style="font-size: 18pt; width: 175px; height: 75px;">Check In</button>
    </div>
</form>

Answer 1

質問を読み間違えたようです。チェックボックスがオンになっているときにボタンを有効にします。

これにより、withname内のチェックボックスがオンになっているかどうかformが確認されますpurpose。

$("input:checkbox").change(function() {    
  $("#btnCheckin").toggle(!!$('form[name="purpose"] > input:checkbox:checked').length))
});

Answer 2

要件を正しく読んだ場合、ボタンを表示するためにチェックボックスのいずれかがチェックされているかどうかを確認する必要があります。すべてがオフになっている場合は、非表示にしますか？

これは、クリックまたはキーボードアクションで発生する可能性があるため、変更イベントを確認する必要があります。これをドキュメントレディハンドラーでラップし、jQueryを含めると、設定が完了します。

$('input:checkbox').change(function () {
    if ($('input[type=checkbox]:checked').length > 0) {
        $('#btnCheckin').show();
    } else {
        $('#btnCheckin').hide();
    }
});

これがあなたのマークアップのフィドルです：http：//jsfiddle.net/GGdtw/

Answer 3

チェックボックスをクリックするときは、チェックボックスがオンになっているかオフになっているかを確認し、それに基づいてボタンを有効または無効にします。（jQueryを使用）

<script>
    $(document).ready(function() {

        $("#checkbox").click(function() {
            if (("#checkbox").is(":checked")) {
                //button show (.show())
            else {
                //disable the button (.hide())
            }
        });
    });
</script>

"display: none;"また、ボタンスタイルでを取り除きます。

フィドル： http： //jsfiddle.net/mbYby/

Answer 4

jQuery'.toggle（）'を使用することもできます。

http://api.jquery.com/toggle/