Флажок show() hide() : jquery

Я хочу показать и скрыть флажок (sem

<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>
ma_english) в зависимости от значений раскрывающегося списка (course_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('');
    }
});

Но, к сожалению, это не работает.


hide jquery show
person Sam    schedule 18.11.2012    source источник
comment
Можем ли мы увидеть код выпадающего списка?   -  person mikeswright49    schedule 18.11.2012
comment
Не могли бы вы сделать скрипт, содержащий части кода JS и HTML? Это помогло бы кодерам это исправить.   -  person Sébastien Renauld    schedule 18.11.2012
comment
Также кажется, что у вас нет элемента с идентификатором sem_1_ma_english   -  person mikeswright49    schedule 18.11.2012
comment
@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>   -  person Sam    schedule 18.11.2012

Ответы (3)


arrow_upward
1
arrow_downward

Для вашей проблемы проверьте этот 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();
         }
    });
 });
person Jai    schedule 18.11.2012

arrow_upward
0
arrow_downward

Попробуйте этот
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('');
   }
});

Try this one this is working for me , and work for you....

person Sagar Upadhyay    schedule 18.11.2012
comment
Проверьте несколько вещей: разместили ли вы код jQuery после $(document).readu() и использовали ли вы именно тот код, который я вам показал, потому что я внес некоторые изменения в html и jQuery, и если да, то, пожалуйста, уточните свой вопрос больше , мне нужен код для dropdownlias, как есть значения и как они появляются.... - person Sagar Upadhyay; 18.11.2012

arrow_upward
0
arrow_downward

Вы пробовали использовать метод toggle()? Я предпочитаю это чередованию «показать» и «скрыть». Этот метод хорошо работает с событиями кликов, но я не пробовал его с выбором значений.

e.g. 

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