Javascript 使用jQuery基于复选框隐藏div

我有以下jQuery代码：

<script> function hideMenteeQuestions() {
    $("#menteeapp").hide();
    $("textarea[name='short_term_goals']").rules("remove", "required");
    $("textarea[name='long_term_goals']").rules("remove", "required");
}

function showMenteeQuestions() {
    $("#menteeapp").show();
    $("textarea[name='short_term_goals']").rules("add", {
        required: true
    });
    $("textarea[name='long_term_goals']").rules("add", {
        required: true
    });
}

function hideMentorQuestions() {
    $("#mentorapp").hide();
    $("input[name='mentees']").rules("remove", "required");
}

function showMentorQuestions() {
    $("#mentorapp").show();
    $("input[name='mentees']").rules("add", {
        required: true
    });
}

</script>

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

    $("#mentee").change(function(){
      if($(this).is(':checked')){
        showMenteeQuestions();
      }else{
        hideMenteeQuestions();
      }
    });
    $("#mentor").change(function(){
      if($(this).is(':checked')){
        showMentorQuestions();
      }else{
        hideMentorQuestions();
      }
    });

    $('#mentee').change();
    $('#mentor').change();

    });
    </script >

函数hidementeQuestions（）{
$（“#menteeapp”）.hide（）；
$（“textarea[name='short\u term\u goals']）。规则（“删除”、“必需”）；
$（“textarea[name='long\u term\u goals']）。规则（“删除”、“必需”）；
}
函数showMenteeQuestions（）{
$（“#menteeapp”）.show（）；
$（“textarea[name='short\u term\u goals']）。规则（“添加”{
必填项：true
});
$（“textarea[name='long\u term\u goals']）。规则（“添加”{
必填项：true
});
}
函数隐藏扭矩（）{
$（“#导师应用程序”）.hide（）；
$（“输入[name='mentees']）。规则（“删除”、“必需”）；
}
函数showMentorQuestions（）{
$（“#导师应用程序”）.show（）；
$（“输入[name='mentees']）。规则（“添加”{
必填项：true
});
}
$（文档）.ready（函数（）{
$（“#学员”）.change（函数（）{
如果（$（this）.is（':checked'））{
showMenteeQuestions（）；
}否则{
隐藏问题（）；
}
});
$（“#导师”）.change（function（）{
如果（$（this）.is（':checked'））{
显示问题（）；
}否则{
隐藏扭矩（）；
}
});
$（“#学员”）.change（）；
$（'导师'）.change（）；
});

此外，以下是我的复选框的HTML：

<input type="checkbox" name="type[]" id="mentor" value="mentor"><span class="checkbox">Mentor</span>
<input type="checkbox" name="type[]" id="mentee" value="mentee"><span class="checkbox">Mentee</span>

导师
学员

它应该根据您选择的复选框隐藏某些div。当您单击复选框时，它会起作用。但是，我还想在页面加载时触发change函数。出于某种原因，它只调用了第一个change函数，在本例中，该函数用于

#mentee

。如果我改变了顺序，那么另一个就行了。它永远不会进入第二个

change（）

调用

---

有什么想法吗？

我将创建一个函数，确定选中哪个框并相应地隐藏div。然后，您可以使用该函数作为更改事件以及加载时的回调。例如：

$(document).ready(function(){
  toggleDivs = function () {
    if($("#mentor").is(':checked')){
      hideMentorQuestions();
      showMenteeQuestions();
    }else if($("#mentee").is(':checked')){
      hideMenteeQuestions();
      showMentorQuestions();
    }
  }

  $('#mentor, #mentee').change(toggleDivs);
  toggleDivs();
});

---

在我看来，您似乎还想要或者在这种情况下，我建议使用单选按钮而不是复选框

您的描述表明您没有将Javascript正确包装到

document.ready（）

函数中，即

$(document).ready(function() {
    // your code here
});

我预计发生的情况是，您的一个函数正在抛出异常，因为DOM尚未正确就绪

---

即使您有一个

文档.ready

处理程序，我认为关于异常的内容可能仍然是正确的-某些条件在两个函数中都失败，但仅在第一次加载时失败。

通过更改

HidementeQuestions（）

和

ShowmenteQuestions（）

函数使其正常工作：

function hideMenteeQuestions(){
  $("#menteeapp").hide();
  $("textarea[name='short_term_goals']").removeClass('required');
  $("textarea[name='long_term_goals']").removeClass('required');
}

function showMenteeQuestions(){
  $("#menteeapp").show();
  $("textarea[name='short_term_goals']").removeClass('required').addClass('required');
  $("textarea[name='long_term_goals']").removeClass('required').addClass('required');
}

---

看起来像是打字错误。。。尝试一个JSFIDDLE是

$（“#mentee”）

中的if语句应该被注释掉吗？很抱歉，它不应该被注释掉。对我来说是有效的。问题似乎出现在您调用的四个函数之一，但尚未发布代码：

showMenteeQuestions

，

hidementequestions

（我会假设其中一个，因为脚本在第一次发出

警报后停止工作）。在这种情况下，javascript错误控制台会告诉您什么？我不会使用最后一行-将所有内容都放在
document.ready（）
中，然后该行应该只读取
toggleDivs（）
。您正在使
切换divs
成为一个全局函数。