I want to be able to enable a div if yes or no was selected from a radio button using jquery. The default is no div shows up when the page loads. When you now select a radio button it determines which div shows up.
Here is what the html code will look like
<html>
<head>Testing</head>
<body>
<p>Are you 70 years and older? <input type="radio" value="yes" name="myradiobutton" /> Yes <input type="radio" value="no" name="myradiobutton" /> No</p>
<div style="display: none" id="yes">
<p>Yes was selected</p>
</div>
<div style="display: none" id="no">
<p>No was selected</p>
</div>
</body>
</html>
It is a long time I did jquery but was wondering how I can turn this on and off with jquery below. How can I write this such that I will be able to control the styles on each div via jquery(turning it on and off based on the radio button selection)?
$(".myradiobutton").click(function(){
var selectedval = $("#myradiobutton input[type='radio']:checked").val();
if(selectedval == "yes"){
//show the yes div
}
if(selectedval == "no"){
//show the no div
}
});
Id must be unique.. You've to use it for only one element.. You can use same class for divs
so you can hide both of them in one selection.. Also you can use the code like this instead of going with if statement.. And I prefer to use change
event instead of click
for radio,checkbox,select
$("[name='myradiobutton']").on('change', function(){ var selectedval = $("input[type='radio'][name='myradiobutton']:checked").val(); $('.just_test').hide(0).filter('#'+selectedval).show(); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Are you 70 years and older? <input type="radio" value="yes" name="myradiobutton" /> Yes <input type="radio" value="no" name="myradiobutton" /> No</p> <div style="display: none" class="just_test" id="yes"> <p>Yes was selected</p> </div> <div style="display: none" class="just_test" id="no"> <p>No was selected</p> </div>
Don't forget to add class="just_test"
to the divs
in html
You tried to use #myradiobutton
as a query selector but the #
represents the id
attribute of an element which you don't have in your HTML code.
To fix it, you can't have your two <input type="radio">
elements both using the myradiobutton
as id
.
Instead of that, my suggestion is to use <label>
to represent the <input>
s.
Example below:
<input type="radio" name="age" value="yes" id="older-than-70">
<label for="older-than-70">Yes</label>
<input type="radio" name="age" value="no" id="younger-than-70">
<label for="younger-than-70">No</label>
<input>
element uses attribute id
to identify itself and uses attribute name="age"
to group with other <input>
s. <label>
element uses attribute for
as a pointer to hook to the <input>
with matching id
.
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.