I am building a form with 8 radio buttons, 4 for System A and 4 for System B. The options for the radio buttons are CF, ISO, ISO-B, and NW. I want to make it so that when a customer selects a radio button for System A, the same button is selected on System B.
How do I make whatever I select in System A's radio buttons simultaneously selected in System B's radio buttons?
What I am basing it off of
You could use a databinding framework like ReactJS to do this nicely, but here's a basic jQuery example that would work. Just listen to the "change" event on your first set of radio buttons, then use jQuery to select the appropriate radio button from the second set.
$( function() {
$("input[name='system-a']").on("change", function(e) {
var newValue = e.target.value;
$("input[name='system-b'][value='" + newValue + "']").prop("checked", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<h2>System A</h2>
<input type="radio" name="system-a" value="1">Option 1</input>
<input type="radio" name="system-a" value="2">Option 2</input>
<input type="radio" name="system-a" value="3">Option 3</input>
<input type="radio" name="system-a" value="4">Option 4</input>
</div>
<div>
<h2>System B</h2>
<input type="radio" name="system-b" value="1">Option 1</input>
<input type="radio" name="system-b" value="2">Option 2</input>
<input type="radio" name="system-b" value="3">Option 3</input>
<input type="radio" name="system-b" value="4">Option 4</input>
</div>
$("input[type='radio']").on("click",function(){
var Name= this.name == "SystemA"?"SystemB":"SystemA";
$("input[name='"+Name+"'][value='"+this.value+"']").prop("checked", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>System A</span>
<br>
<input type="radio" name="SystemA" value="CF"/><lable>CF</lable>
<input type="radio" name="SystemA" value="ISO"/><lable>ISO</lable>
<input type="radio" name="SystemA" value="ISO-B"/><lable>ISO-B</lable>
<input type="radio" name="SystemA" value="NW"/><lable>NW</lable>
<hr>
<span>System B</span>
<br>
<input type="radio" name="SystemB" value="CF"/><lable>CF</lable>
<input type="radio" name="SystemB" value="ISO"/><lable>ISO</lable>
<input type="radio" name="SystemB" value="ISO-B"/><lable>ISO-B</lable>
<input type="radio" name="SystemB" value="NW"/><lable>NW</lable>
Related
I am trying to write a jQuery where a div is to be shown if a specific option is chosen from dropdown and a specific radio button is clicked. But I am unable to do so.
Html
<pre><code>
<html>
</body>
<select name="Location of positive event" id="dropdown">
<option value="home">At home</option>
<option value="commute">On my commute</option>
<option value="work">At work</option>
<option value="outside">On the street</option>
<option value="other">Other</option>
</select>
<label>
Morning
<input name="time-radio" type="radio" value="1">
</label>
<label>
Evening
<input name="time-radio" type="radio" value="2">
</label>
<div id="test">
<label>
<input name="test1" value="test!" type="checkbox">
Test1
</label>
<label>
<input name="test1" value="test#" type="checkbox">
Test1
</label>
</div>
</body>
</html>
</code></pre>
Can you please check the below code? Hope it will work for you. We are creating a jquery code for hiding and show a div which is having id = test, we are adding a class name div and hide it on default. It will be shown when the “AT Work” option is selected from the dropdown and also shown when you click the “Evening” radio button. You can adjust it according to your requirement.
Please refer to this link: https://jsfiddle.net/yudizsolutions/xayb9h1p/
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
var optionValue = $(this).attr("value");
if (optionValue) {
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
}
});
}).change();
});
$(document).ready(function() {
$('input[type="radio"]').click(function() {
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$(".box2").not(targetBox).hide();
$(targetBox).show();
});
});
.box,
.box2 {
display: none;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<pre><code>
<html>
<body>
<select name="Location of positive event" id="dropdown">
<option>Select</option>
<option value="home">At home</option>
<option value="commute">On my commute</option>
<option value="work">At work</option>
<option value="outside">On the street</option>
<option value="other">Other</option>
</select>
<label>
Morning
<input name="time-radio" type="radio" value="1">
</label>
<label>
Evening
<input name="time-radio" type="radio" value="2">
</label>
<div id="test" class="box work ">
<h2>for Dropdown</h2>
<label>
<input name="test1" value="test!" type="checkbox">
Test1
</label>
<label>
<input name="test1" value="test#" type="checkbox">
Test2
</label>
</div>
<div id="test1" class="box2 2">
<h2>for Radio Button</h2>
<label>
<input name="test3" value="test!" type="checkbox">
Test3
</label>
<label>
<input name="test4" value="test#" type="checkbox">
Test4
</label>
</div>
</body>
</html>
How do I make a dependent radio button based on the option selected?
If Engineering Projects is selected, then a radio button should appear and it must have radio buttons of abc, def, ghi, etc.
If MCA Projects is selected then a radio button should appear and it must have radio buttons of jsp, asp, php, java, etc.
If none are selected, no radio button should appear.
<p>
Area Of Interest
<select name="formGender">
<option value="">Select...</option>
<option value="e">Engineering Project</option>
<option value="m">MCA Projects</option>
<option value="t">M-Tech Projects</option>
<option value="s">Msc Projects</option>
</select>
</p>
You need to get value of selected option and display relative radio.
$("#dropdown").change(function(){
var value = $(this).children("option:selected").val();
$(".radioBox").hide();
if (value == "number")
$("#number").show();
else if (value == "alphabet")
$("#alphabet").show();
else if (value == "sign")
$("#sign").show();
});
.radioBox {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
<option value="">Select on of options</option>
<option value="number">Number</option>
<option value="alphabet">Alphabet</option>
<option value="sign">Sign</option>
<option value="none">None</option>
</select>
<div id="number" class="radioBox">
<label>1</label>
<input type="radio" name="number" />
<label>2</label>
<input type="radio" name="number" />
<label>3</label>
<input type="radio" name="number" />
</div>
<div id="alphabet" class="radioBox">
<label>A</label>
<input type="radio" name="alphabet" />
<label>B</label>
<input type="radio" name="alphabet" />
<label>C</label>
<input type="radio" name="alphabet" />
</div>
<div id="sign" class="radioBox">
<label>#</label>
<input type="radio" name="sign" />
<label>#</label>
<input type="radio" name="sign" />
<label>$</label>
<input type="radio" name="sign" />
</div>
You need to do something like this:
$('#formGender').change(function(){
var areaOfInterest = $('#formGender').find(":selected").text();
if(areaOfInterest.toString() === "Engineering Project"){
var arr=["abc","def","ghi"];
for (i = 0; i < arr.length; i++) {
var radioBtn = $('<input type="radio" name="sub" value="ersubs" checked>'+ arr[i]+"<br>");
radioBtn.appendTo('#radiobuttons');
}
}
else{
$( "#radiobuttons" ).empty();
}
});
Add further more if/else as per your requirements. Here is a working example.
I'm improving my website, and it has the following dropdown where some can choose the sex:
<h2>Person Sex</h2>
<label for="sex"></label>
<select id="sex">
<option id="men">Men</option>
<option id="women">Women</option>
</select>
Perfect. To send to my backend is very simple, i just I get the value of #sex id and send too the backend through a ajax.
Now, i want use checkbox's:
<h1>Person Sex</h1>
<label for="men">Men</label>
<input type="radio" id="men"/><br/>
<label for="women">Women</label>
<input type="radio" id="women"/>
My question is: how can i associate the women or the men to only a label called sex? And how can i make impossible to choose both.
Thanks.
Use the name and value attributes of the inputs:
<label for="men">Men</label>
<input type="radio" id="men" value="men" name="sex" /><br/>
<label for="women">Women</label>
<input type="radio" id="women" value="women" name="sex" />
The name field on radio buttons allows them to be grouped. When submitting the form, the value of the selected item should be the value of the response for sex. For example, $sex = $_POST["sex"]; in PHP.
If you want a default value for your radio button group:
<input type="radio" id="women" value="women" name="sex" checked="checked" />
Add a name that is the same in both radio buttons. That way, only one can be chosen.
<h1>Person Sex</h1>
<label for="men">Men</label>
<input type="radio" id="men" name="sex"/><br/>
<label for="women">Women</label>
<input type="radio" id="women" name="sex"/>
I want to add a JS function that can search all "input[type]=radio" button and output them with all original attribute and value in a new div.
For example:
I want to select all the radio button part and output them in "div1"
<div id=main>
<input type="text" name="_nkw" id="_nkw" size="50" maxlength="300" value="" placeholder="Enter keywords or item number">
<select name="_in_kw" id="_in_kw" size="1">
<option value="1" selected="selected">All words, any order</option>
<option value="2">Any words, any order</option>
<option value="3">Exact words, exact order</option>
<option value="4">Exact words, any order</option>
</select>
<input type="radio" id="LH_PrefLocRadio" name="_fsradio2" value="&LH_PrefLoc=1" disabled="disabled" checked="checked">
...(there contain some other items)
<input type="radio" disabled="disabled" class="from_sellers_aspect_chbx" checked="checked" id="LH_SpecificSeller_id" name="_fsradio" value="&LH_SpecificSeller=1">
</div>
<div id=div1>
<p id="output"></p>
</div>
Then some output should appear in div1 section like:
<div id=div1>
<input type="radio" id="LH_PrefLocRadio" name="_fsradio2" value="&LH_PrefLoc=1" disabled="disabled" checked="checked">
<input type="radio" disabled="disabled" class="from_sellers_aspect_chbx" checked="checked" id="LH_SpecificSeller_id" name="_fsradio" value="&LH_SpecificSeller=1">
</div>
In the browser, it shows like there are some more radio buttons appear in the button of the page.
Clone the elements and append them to output
http://api.jquery.com/clone/
jQuery('#main input[type=radio]').clone().appendTo('#output')
I have the following HTML:
HTML:
<input type="radio" name="abc" value="0" selected="selected" style="display:none" />
<input type="radio" name="abc" value="1" />1+
<input type="radio" name="abc" value="2" />2+
<input type="radio" name="abc" value="3" />3+
JQuery to get the selected radio button
$('input:radio[name=abc]:checked').val();
Why doesn't the code above work on page load, BEFORE a user selected a radio button? It's strange because the code above does work AFTER a user selected a radio button.
It seems to me that I have set the default radio button value to be 0, but if you
Meaning, if the radio button value is selected, return the selected value - otherwise, return 0 (when no value has been selected)
You are using the wrong attribute. For radio buttons you have to use the checked attribute and not the selected attribute.
<input type="radio" checked="checked">
or just:
<input type="radio" checked>
First correct the attribute to checked and remove selected attribute which is wrong and then use the following code.
t will get the selected value of the radiobutton at button click.
ex for list
$("#btn").click(function() {
$('input[type="radio"]:checked').val();
});
Radio has the attribute checked, not selected
<input type="radio" name="abc" value="0" checked="checked" style="display:none" />
<input type="radio" name="abc" value="1" />1+
<input type="radio" name="abc" value="2" />2+
<input type="radio" name="abc" value="3" />3+