I am trying to learn jQuery, by putting what I've learned into practice. So, here's my coding problem.
I have two buttons, one "yes" and one "no". Once the "Yes" radio button is selected, a new text input is to appear.
my jquery below:
$(document).ready(function(){
$("#many").hide();
var isChecked = $("#dform input" ).change(function() {
$("input[name=question]:checked", "#dform").val();
if(isChecked == yes){
$("#many").show();
}else {$("#many").hide();}
});
});
my code-pen
I used this answer added the value function in a variable, then used it in a conditional statement. I put the value $("input[name=question]:checked", "#dform").val();
in an alert to make sure that the value attached to the "yes" radio button has been captured. However, when I put the .val() function in a variable and use it in a conditional statement, it doesn't work.
Did I set the Jquery up correctly?
Try something like this
<script>
$(document).ready(function () {
$("#many").hide();
$("input[name='question']").click(function () {
if ($('#yes').is(':checked')) { $("#many").show(); }
else { $("#many").hide(); }
});
});
</script>
You're a little bit off track. You don't need to name your onChange handler ( var isChecked...
) and I think that's confusing you. I would try something more along the lines of this:
$(document).ready(function(){
$("#many").hide();
$("#dform input[name=question]").change(function() {
if ($('#dform input[name=question]:checked').attr('value') == 'yes') {
$("#many").show();
} else {
$("#many").hide();
}
});
});
Try this one to hide and show an element
$(document).ready(function(){
$("#many").hide();
$("#dform input" ).change(function() {
$("#many").show();
});
$("#no").change(function(){
$("#many").hide();
})
});
change html as:
<input type="radio" name="question" id="no" value="no" checked>
There are different way to do it simple way to do it with Jquery addClass and Remove Class method
**HTML**
<h4>
Click on button to toggle
</h4>
<div style="padding:10px;">
<button class="show btn">Show</button>
<button class="hide btn">Hide</button>
</div>
<div>
<input type="text" id="name" class="displayN"/>
</div>
Jquery
$(document).ready(function(){
$(".show").click(function(){
$("#name").addClass('displayB').removeClass("displayN");
});
$(".hide").click(function(){
$("#name").addClass("displayN").removeClass("displayB");
})
});
Working Example: https://jsfiddle.net/mshyam83/u3wfpznn/
Please replace your js with this:
$(document).ready(function(){
$("#many").hide();
$("#dform input" ).change(function() {
var val = $("input[name=question]:checked", "#dform").val();
if (val == "yes") {
$("#many").show();
} else {
$("#many").hide();
}
});
});
I'm sure it could be cleaned up more, but its working anyway. The jQuery set up is fine. Code Pen: http://codepen.io/anon/pen/GqxGmp
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.