show（）hide（）複選框：jquery

我想顯示和隱藏複選框（sem_1_ma_english），具體取決於Dropdown（course_english）列表的值。show（）hide（）複選框：jquery

當我從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(''); 
    } 
});

但可悲的是它不工作。

來源

2012-11-18 Sam

我們可以看到下拉列表的代碼嗎？ – mikeswright49

您可以製作一個包含代碼的JS和HTML部分的小提琴嗎？它會幫助編碼人員修復它。 –

此外，它似乎你沒有一個元素的ID爲sem_1_ma_english – mikeswright49

試試這個
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(''); 
    } 
});

試試這個，這是爲我工作，併爲你工作...

來源

2012-11-18 16:34:03

感謝您的回覆，但它不適合我。 :( – Sam

檢查幾件事情，你把你的jQuery代碼放在$（document）.readu（）之後，你是否像我向你展示的那樣使用了完全的代碼，因爲我在html和jQuery中做了一些改變，如果是的話請指定你的問題更多，我需要一個代碼dropdownlias如何有價值觀，以及它們如何出現.... –

對於您的問題，檢查這個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(); 
     } 
    }); 
});

來源

2012-11-18 17:23:34 Jai

您是否嘗試過使用「切換（）' 方法？我更喜歡這個交替的'顯示'和'隱藏'。此方法適用於單擊事件，但我沒有通過選擇值來嘗試。

例如

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

來源

2013-07-25 11:29:19 user2514224

show（）hide（）複選框：jquery

回答

相關問題