I want to show and hide a checkbox(sem_1_ma_english) depending upon the values of a Dropdown(course_english) list.
When I select a values from the DROPDOWN list, then the CHECKBOX should be displayed otherwise not.
Html structure:For 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 I have used the piece of code to solve the problem
$("#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('');
}
});
But sadly it is not working.
For your issue check this jsbin: http://jsbin.com/ujuxiy/1/edit
if this is your 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>
then this should be your jquery for this:
$(function(){
$(".form-row").hide();
$("#course_english").change(function() {
if ($("#course_english").val() == "MA English") {
$(".form-row").show();
} else {
$(".form-row").hide();
}
});
});
Try this one
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>
ANd jQuery code should be like this
$("#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....
Have you tried using the 'toggle()' method? I prefer this to alternating 'show' and 'hide'. This method works well with click events but I haven't tried it with selecting values.
eg
$(".sem_1_ma_english").parent().show(); //Shows initially
if ($("#course_english").val() == "MA English") {
$(".sem_1_ma_english").parent().toggle();
};
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.