显示（）隐藏（）复选框：jQuery答案

【问题标题】：show() hide() checkbox : jquery显示（）隐藏（）复选框：jQuery
【发布时间】：2012-11-18 16:17:49
【问题描述】：

我想根据 Dropdown(course_english) 列表的值显示和隐藏一个复选框(sem_1_ma_english)。

当我从 DROPDOWN 列表中选择一个值时，应该显示 CHECKBOX，否则不显示。

Html 结构：用于复选框

<div class="form-row">
<label for="sem_1_ma_english">
   Semester I – Subjects for M. A. English
<span class="helptext"></span>
</label>
<label for="sem_1_ma_english-poetry">
<input id="sem_1_ma_english-poetry" class="" type="checkbox" checked="yes" value="Poetry" name="sem_1_ma_english[]">
 Poetry
</label>
<label for="sem_1_ma_english-drama">
<input id="sem_1_ma_english-drama" class="" type="checkbox" checked="yes" value="Drama"  name="sem_1_ma_english[]">
Drama
</label>
<label for="sem_1_ma_english-fiction">
<input id="sem_1_ma_english-fiction" class="" type="checkbox" checked="yes" value="Fiction" name="sem_1_ma_english[]">
Fiction
</label>
<label for="sem_1_ma_english-prose">
<input id="sem_1_ma_english-prose" class="" type="checkbox" checked="yes" value="Prose"  name="sem_1_ma_english[]">
Prose
</label>
</div>

所以我使用了这段代码来解决问题

$("#course_english").change(function() {
    if ($("#course_english").val() == "MA English") {
        $("#sem_1_ma_english").parent().show();
    } else {
        $("#sem_1_ma_english").parent().hide();
        $("#sem_1_ma_english").val('');
    }
});

但遗憾的是它不起作用。

【问题讨论】：

我们能看到下拉列表的代码吗？
你能做一个包含代码的 JS 和 HTML 部分的小提琴吗？它会帮助编码人员修复它。
另外，您似乎没有 id 为 sem_1_ma_english 的元素
@mikeswright49 : 这是下拉列表 <select id="course_english" class="" name="course_english"> <option value="">--Select One--</option> <option value="MA English">MA English</option> <option value="B. A. (Hons.) with Mass Communication">B.A. (Hons.) with Mass Communication</option> <option value="M. A. (English)">M. A. (English)</option> <option value="M. Phil.">M. Phil.</option> </select> 的代码

标签： jquery hide show

【解决方案1】：

对于您的问题，请检查此 jsbin：http://jsbin.com/ujuxiy/1/edit

如果这是你的 html:

<select id="course_english" class="" name="course_english"> 
    <option value="">--Select One--</option> 
    <option value="MA English">MA English</option> 
    <option value="B. A. (Hons.) with Mass Communication">B.A. (Hons.) with Mass Communication</option> 
    <option value="M. A. (English)">M. A. (English)</option> <option value="M. Phil.">M. Phil.</option> 
</select>


  <div class="form-row">
  <label for="sem_1_ma_english">
      Semester I – Subjects for M. A. English
      <span class="helptext"></span>
  </label>
  <label for="sem_1_ma_english-poetry">
      <input id="sem_1_ma_english-poetry" class="sem_1_ma_english" type="checkbox"     checked="yes"      value="Poetry" name="sem_1_ma_english[]">
Poetry
 </label>
 <label for="sem_1_ma_english-drama">
  <input id="sem_1_ma_english-drama" class="sem_1_ma_english" type="checkbox" checked="yes"     value="Drama"  name="sem_1_ma_english[]">
Drama
</label>
 <label for="sem_1_ma_english-fiction">
  <input id="sem_1_ma_english-fiction" class="sem_1_ma_english" 
   type="checkbox" checked="yes" value="Fiction" name="sem_1_ma_english[]">
  Fiction
 </label>
 <label for="sem_1_ma_english-prose">
 <input id="sem_1_ma_english-prose" class="sem_1_ma_english" type="checkbox" checked="yes"      value="Prose" name="sem_1_ma_english[]">
 Prose
</label></div>

那么这应该是你的 jquery：

 $(function(){
    $(".form-row").hide();
       $("#course_english").change(function() {
         if ($("#course_english").val() == "MA English") {
             $(".form-row").show();
         } else {
            $(".form-row").hide();
         }
    });
 });

【讨论】：

【解决方案2】：

试试这个
HTML

<div class="form-row">
<label for="sem_1_ma_english">
Semester I – Subjects for M. A. English
<span class="helptext"></span>
</label>
<label for="sem_1_ma_english-poetry">
<input id="sem_1_ma_english-poetry" class="sem_1_ma_english" type="checkbox" checked="yes"      value="Poetry" name="sem_1_ma_english[]">
Poetry
</label>
<label for="sem_1_ma_english-drama">
<input id="sem_1_ma_english-drama" class="sem_1_ma_english" type="checkbox" checked="yes"     value="Drama"  name="sem_1_ma_english[]">
Drama
</label>
<label for="sem_1_ma_english-fiction">
<input id="sem_1_ma_english-fiction" class="sem_1_ma_english" 
type="checkbox" checked="yes" value="Fiction" name="sem_1_ma_english[]">
Fiction
</label>
<label for="sem_1_ma_english-prose">
<input id="sem_1_ma_english-prose" class="sem_1_ma_english" type="checkbox" 
 checked="yes"      value="Prose"  
 name="sem_1_ma_english[]">
 Prose
</label>

和jQuery代码应该是这样的

$("#course_english").change(function() {
   if ($("#course_english").val() == "MA English") {
       $(".sem_1_ma_english").parent().show();
   } else {
       $(".sem_1_ma_english").parent().hide();
       $(".sem_1_ma_english").val('');
   }
});

试试这个对我有用，对你有用....

【讨论】：

检查几件事，你有没有把你的 jQuery 代码放在 $(document).readu() 之后，你是否使用了我展示给你的代码，因为我在 html 和 jQuery 中做了一些改变如果是，那么请详细说明您的问题，我需要一个下拉菜单的代码，如何存在值以及它们如何显示......

【解决方案3】：

您是否尝试过使用“toggle()”方法？我更喜欢交替“显示”和“隐藏”。此方法适用于点击事件，但我没有尝试过选择值。

例如

 $(".sem_1_ma_english").parent().show(); //Shows initially
      if ($("#course_english").val() == "MA English") {
        $(".sem_1_ma_english").parent().toggle();
      };    
    });

【讨论】：