How to set Radio button checked(select) using Attribute value
html :
<div class="controls">
<input type="radio" id="chairs_canadd" name="chairs_canadd" value="1" />
<input type="radio" id="chairs_canadd" name="chairs_canadd" value="0" />
</div>
now i m getting the value of chairs_canadd value from database via AJAX. if the value is 0 then the second have to get selected , if the value is 1 then first one has to be get selected.
Firstly, your IDs are not unique.
Second, a radio button group like this can only have one checked value at a time. So why not just use .val:
$('input:radio[name=chairs_canadd]').val([editValue.chairs_canadd]);
jsFiddle
You have value for option that needs to be set in variable chairs_canadd. you can get the radio button by value and then set it. Like this:
$(".controls input[value="+chairs_canadd+"]").prop("checked", true)
Related
my dynamically populated radio button group gets more than one item checked. so how to solve this.?using HTML,CSS,JS; C#(backend).
i wrote a code for list of items with input type as "radio". the values of list item is stored in a Arraylist in backend i.e C#. but when i try to run the code, more than one radio button gets selected.
please help me solve my issue. and even how to check which radio value is selected and how to pass the checked radio value to backend or server.
HTML code
<div class="demo-container size-thin">
<div class="RadListBox RadListBox_Silk" >
<div class="rlbGroup">
<ul>
<%
foreach (var item in dataname)
{
%>
<li>
<input type="radio" />
<img alt="" src="Images/<%=item %>.png"> <%= item%></li>
<%
}
%>
</ul>
</div>
</div>
</div>
Sample frontend visual
i have not writeen any javascript code as of now.
To be clearer than the other answers. All radio buttons in a group must have identical values for their name attribute. This is what groups them together. It's their value attribute that is used to give each button its individual meaning.
Additionally, the name attribute is necessary for any/all form elements that are supposed to submit their value during the submit event. If an element doesn't have the name attribute, it won't send its data.
Once you've made this change, you don't have to worry about how to send the checked radio button's value to the backend server because that will be done automatically when the form that the radio button is in gets submitted.
// Get reference to parent element of first radio button group
var parent = document.querySelector("fieldset:first-child");
// Set up click event handler for it
parent.addEventListener("click", function(e){
// Check to see if the originator of the event was a radio button
if(e.target.nodeName === "INPUT" && e.target.getAttribute("type") === "radio"){
// Get a reference to the checked radio button
console.log("Checked radio button is: " +
document.querySelector("input[type=radio][name=testGroup1]:checked").value);
}
});
<fieldset>
<legend>Group 1</legend>
<label> Choice A<input type="radio" name="testGroup1" value="A"></label><br>
<label> Choice B<input type="radio" name="testGroup1" value="B"></label><br>
<label> Choice C<input type="radio" name="testGroup1" value="C"></label>
</fieldset>
<fieldset>
<legend>Group 2</legend>
<label> Choice A<input type="radio" name="testGroup2" value="A"></label><br>
<label> Choice B<input type="radio" name="testGroup2" value="B"></label><br>
<label> Choice C<input type="radio" name="testGroup2" value="C"></label>
</fieldset>
You need to give a name to it
<input type="radio" name="myRadio">
this way the radio know which "group" is it from
input radio
#Sourav,
First, we've to set the name of that radio button.
<input type="radio" name="nameOfThisField">
I have a radio button group on my page which is within a form. When the form is submitted, I would like to retrieve the values of the form and save them to my database. It seems that the value for the radio button group is radiobtngrp: 'on' but I don't know which one of the radio buttons is on. How do radio buttons work on the submit of a form?
Here is my HTML code for the radio buttons:
<label for="q-<%= question.id %>">
<input id="q-<%= question.id %>-r-i" type="radio" class="form-control" name="radiobtn">
<img src="/images/a.png">
</label>
I have multiple radio buttons which are added through a loop in my ejs file.
My submit button looks like this:
<button class="btn btn-lg btn-signin btn-yellow" type="submit">Submit</button>
Now in my route, if I try something like this:
console.log(req.body.radiobtn);
I see this in the console:
radiobtn: 'on'
Why is this? And how can I get the actual radio button which was clicked?
Thanks in advance!
Give each radio button in a group both name and value attributes.
The name attribute value is used as the key when submitting a form, with the value of the key taken from the value attribute of the selected radio button.
All buttons in the same group share the same name attribute value.
Here a quick HTML demo: it's not supposed to do anything except show the query string in the location bar when you hit submit:
<form method="get">
<input type="radio" name="myRadio" value="1">( value 1)<br>
<input type="radio" name="myRadio" value="2">( value 2)<br>
<input type="radio" name="myRadio" value="3">( value 3)<br>
<input type="submit" value="submit">
</form>
The default value of the value attribute is the string "on". Hence "on" is sent as the value of the radio group named "radiobtn" when the selected button is missing a value attribute. (Ref. HTML standard)
If there is a element test-me for example which takes URL has attribute. That URL attribute should change depending on checkbox. If one checkbox is clicked then url1 should be displayed whereas if 2nd checkbox is clicked then 2nd url should be displayed.
Right now I do it this way,
<input type="checkbox" ng-model="chk1"> Check1
<input type="checkbox" ng-model="chk2"> Check2
<test-me url="url1" ng-show="chk1"></test-me>
<test-me url="url2" ng-show="chk2"></test-me>
The problem with above approach is that if I have 10 checkboxes then there will be 10 test-me elements. How can I do this the better way so that I supply the URLs in a way depending on the checkbox value or something but there will be more modularity.
You can use a controller variable to store all your checkboxes. So inside your controller use an array to store all models :
vm.controllers = [];
And on view add them into array :
<input type="checkbox" ng-model="ctrl.checkboxes[0]" />
<input type="checkbox" ng-model="ctrl.checkboxes[1]" />
<input type="checkbox" ng-model="ctrl.checkboxes[2]" />
So now on your controller you can access all of them and do any calculations you want and store them on another controller variable eg :
vm.url = "http://blablabla";
Use that on your view : {{ctrl.url}}
I am facing one issue
HTML
<input id="cb" type="checkbox" name="Employment_Staus" value="E" />
<input type="button" value="Check" id="id" />
JQUERY
$('#id').click(function(){
$('input[type="checkbox"]')[0].setAttribute("checked", "checked");
});
First time when I click on check button, it works!(it check the check-box ), then I manually uncheck the check box!
When I press check button again after uncheck manually , it not work!
I don't want to use attr or prop etc etc !!
Example
http://jsfiddle.net/wL6qr0hp/4/
The checked attribute sets the default state, not the current state.
Modify the checked property (with .checked = true) instead.
I am generating an HTML form with some radio buttons and checkboxes. the generated code for the radio buttons for instance are like these:
<input id="101_2" type="radio" name="101" value="2" >
<input id="101_3" type="radio" name="101" value="3" checked="true">
Using JavaScript I can make a for cycle to see what radio is checked using the check attribute.
The problem is that if I manually click in another radio option (from the same group as in the example), visually in the HTML I can see that another radio is selected, but the JavaScript is still saying that the input 101_3 is the selected radio option. If I look at the HTML using firebug I can see that the new selected option is indeed not selected (doesn't have the checked attribute)... despite I have selected manually.
Any ideas on this?
Fist and formost when naming your radio buttons or any type of DOM input element never start the name of an input element with a number, always start the name of your input element with a letter.
For your posted code you would name your radios in similar fashion, one01 or x101 or o101,ect...
Do the same thing with your ids' of any DOM element. Never start an id of a DOM element with a number.
--HTML
<input id="x101_2" type="radio" name="x101" value="2">
<input id="x101_3" type="radio" name="x101" value="3" checked="checked">
<br /><br />
<button type="button" onclick="WhatsChecked()">Whats Checked?</button>
--JavaScript
function WhatsChecked() {
var radCk = document.body.querySelectorAll('input[name="x101"]:checked')[0];
alert(radCk.id);
};
--Fiddler
fiddler