2

当用户选中“学生”时（check-1）。2 个复选框值应该消失并显示一个文本输入 div。截至目前，我已将输入显示记录下来。但我似乎无法让复选框消失。

我试过了：

$(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 回答