2

ユーザーが「学生」をチェックした場合(check-1)。2 つのチェックボックスの値が消えて、テキスト入力 div が表示されるはずです。現時点では、input-reveal をダウンさせています。しかし、チェックボックスを消すことができないようです。

私はもう試した：

$(function () {
  $('#check-1').change(function () {                
      $('.name').toggle(this.checked);
      $('#check-1').hide();
      $('#check-2').hide();
  }).change();
});

しかし、それはうまくいきません。「学生」がチェックされたら、チェックボックスを非表示にするにはどうすればよいですか? 何か案は？

ここに小さなフィドルがあります。事前にご協力いただきありがとうございます。

4

2 に答える 2

4

以下のコードを参照してください。

$(".my-check").change(function() {
    if ( $(this).is(':checked') ) {
        $(".my-box").show();
    } else {
        $(".my-box").hide();
    }
});

詳細: http://jsfiddle.net/marloscarmo/vMFQd/

于 2013-02-14T02:32:36.893 に答える
2

テキストボックスをdivで囲み、「thisWrapper」と言います

<div id="thisWrapper">
    <input type="checkbox" id="check-1" class="checkchoice staff" required><label for="check-1" class="choice staff">Staff</label>
    <input type="checkbox" id="check-2" class="checkchoice student" required><label for="check-2" class="choice student">Student</label>
</div>

投稿した変更イベントに次を追加します。

  $("thisWrapper").hide();

両方のチェックボックスを一度に非表示にする必要があります。もちろん、チェックボックスを再度表示するには、「キャンセル」または「リセット」ボタンを追加する必要があります。

または、チェックボックスに「mycheckboxes」のような新しいクラス名を付けて、これを呼び出すことができます。

$(".mycheckboxes").click(function() {
        $('#check-1').hide();
$("#check-2").hide();
});

* これが私が FIDDLER で作業した完全な例です **

代わりにこれを試してください：

<div id="thisWrapper">
    <input type="checkbox" id="check-1" class="checkchoice" required><label for="check-1" class="choice staff">Staff</label>
    <input type="checkbox" id="check-2" class="checkchoice" required><label for="check-2" class="choice student">Student</label>
</div>
<div id="nameinput">
    <input type="text" placeholder="So what's your name?" />
</div>

<script>
    $(function() {

       $(".checkchoice").change(function() {
              $("#thisWrapper").hide();
               $("#nameinput").show();
       });

    });
</script>
于 2013-02-14T02:05:18.023 に答える