使用jQuery根据复选框隐藏div

Question

我有以下的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 >

此外，这是我的复选框的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>

这段代码的作用是根据所选复选框来隐藏特定的

元素。当您单击复选框时，它可以正常工作。但是，我还想在页面加载时触发更改函数。出于某种原因，它只调用第一个更改函数，即#mentee的情况。如果我更改顺序，则另一个函数起作用。它从未进入第二个change()调用。

有什么想法吗？

- codeman

---

看起来像是打错了...试试jsfiddle。 - NimChimpsky

$("#mentee") 里的if语句应该被注释掉吗？ - JesseBuesking

抱歉，它不应该被注释掉。 - codeman

看起来问题出在你调用但没有发布代码的这四个函数之一：showMenteeQuestions,hideMenteeQuestions（因为脚本在第一个 alert 之后停止工作，所以我会猜测是其中一个）。 - Jasper

更新代码，并加入其余的函数。 - codeman

Answer 1

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

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

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

在我看来，你似乎想要做出二选一的选择。如果是这样，我建议使用单选框而不是复选框。

- Greg Guida

---

我不会使用最后一行代码 - 把 所有 东西都放在 document.ready() 中，然后那一行代码应该只是 toggleDivs()。现在你正在将 toggleDivs 变成全局函数。 - Alnitak

Answer 2

您的描述表明您没有正确地将JavaScript包装到document.ready()函数中，即：

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

我猜测发生的情况是你的一个函数抛出了异常，因为DOM还没有完全准备好。

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

- Alnitak

---

在这种情况下，你的JavaScript错误控制台告诉你什么？ - Alnitak

Answer 3

通过更改hideMenteeQuestions()和showMenteeQuestions()函数, 成功让它正常工作：

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');
}

- codeman