show() hide() checkbox : jquery

Möchte ich zeigen und verstecken eine checkbox(sem_1_ma_english), die je nach dem Werte einer Dropdown-Box(course_english) Liste.

Wenn ich wählen Sie einen Wert aus der DROPDOWN-Liste, dann wird die CHECKBOX angezeigt werden soll, sonst nicht.

Html-Struktur:Für die Checkbox

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

So, ich habe das Stück code, das problem zu lösen

$("#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('');
    }
});

Aber leider es funktioniert nicht.

Können wir den code für die dropdown-Liste?
Könnten Sie eine Geige, die sowohl den JS-und HTML-code-Teile? Es würde helfen, Programmierer beheben.
Auch scheint es, Sie haben nicht ein element mit der id sem_1_ma_english
Hier ist der code für das Drop-down-Liste <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>

InformationsquelleAutor Sam | 2012-11-18

  1. 1

    Für Ihr Problem überprüfen Sie das jsbin: http://jsbin.com/ujuxiy/1/edit

    wenn dies Ihre 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>

    dann sollte dies Ihre jquery:

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

    InformationsquelleAutor Jai

  2. 0

    Versuchen, diese

    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>

    - Und jQuery-code sollte wie folgt sein 

    $("#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('');
   }
});

    Versuchen, diese dies ist, für mich zu arbeiten , und die Arbeit für Sie....

    Danke für deine Antwort aber es funktioniert nicht für mich . 🙁
    Überprüfen Sie mehrere Dinge, die Sie Sie jQuery-code nach $(document).readu() und hast du den code genau, wie ich gezeigt hatte, Sie hatte ich da machen einige änderungen in html und jQuery und wenn ja, dann bitte geben Sie Ihre Frage mehr, ich brauche einen code für dropdownlias, wie Sie es sind Werte und wie Sie angezeigt werden....

    InformationsquelleAutor Sagar Upadhyay

  3. 0

    Haben Sie versucht, mit Hilfe der "toggle ()" - Methode? Ich bevorzuge diese abwechselnd zu 'zeigen' und 'ausblenden'. Diese Methode funktioniert auch mit click-Ereignisse, aber ich habe es nicht versucht, bei der Auswahl der Werte.

    z.B. 

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

    InformationsquelleAutor user2514224

Schreibe einen Kommentar