Javascript 基于复选框值显示/隐藏div

当用户勾选“学生”（勾选-1）时。这两个复选框的值应该消失，并显示一个文本输入div。现在，我已经得到了输入显示下来。但我似乎无法让复选框消失

我试过：

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

但这不起作用。勾选“学生”后如何隐藏复选框？有什么想法吗

---

这是一个小盒子。提前感谢您的帮助。

用div将文本框括起来，说“thisWrapper”

这将同时隐藏两个复选框。当然，您必须添加“取消”或“重置”按钮才能再次显示复选框

或者，您可以为复选框指定一个新的类名，如“MyCheckbox”，并将其称为：

$(".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>

工作人员
学生
$（函数（）{
$（“.checkchoice”）.change（函数（）{
$（“#thiswapper”）.hide（）；
$（“#名称输入”）.show（）；
});
});

请参见下面的代码：

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

详情请参阅：

---

为什么两个都隐藏？你隐藏的是复选框，而不是标签。（这是你问的吗？）我尝试了你的建议。但似乎一切都消失了。哦，对不起，我以为你想隐藏标签。试试这个：$（“#check-2”）。单击（函数（）{$（'#check-1'）。隐藏（）$（'#check-2'）。隐藏（）看看我上面的代码-如果你复制并粘贴它，就可以在fiddler中工作-很抱歉我不经常使用fiddler Lol这似乎对我不起作用。我是否遗漏了什么…（忘记了显示）太棒了。谢谢你的帮助。

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

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