I have 3 radiobuttons. I want they act like radiobuttons : if the user click one, the other can't be clicked. But somehow my buttons are acting like checkboxes, the user can select all 3. Here is my code, what am i missing ? Thanks !
<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status1" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status2" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label></div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status3" data-label="Option 3" data-mask="radiobutton" value="3"><label class="radio-label">Option 3</label>
</div>
Here is an image showing the problem. I DON'T USE W3Schools as a learning resource, i just used their HTML editor to show the example.
All the radio buttons in a group must have the same value for the name attribute. That's what makes them mutually exclusive.
Here's the documentation for <input type='radio'> which includes:
The "name" setting is an important attribute of radio buttons, as it
identifies which group a radio button belongs to. Because groups of
radio buttons act as a unit, you must specify a common name for all
related radio buttons. When two or more radio buttons share a name,
selecting one of the buttons will unselect all of the others with the
same name. If you have more than one group of radio buttons on a
single page, the buttons in different groups must have different
"name" attributes.
Radio buttons are grouped together using the name attribute. give them the same name.
<div class="form-group">
<div class="form-item" id="form-item-hi_status1">
<label for="input-status1" ></label>
<input class="radio-input" type="radio" id="input-hi_status1" name="input-hi_status" data-label="Option 1" data-mask="radiobutton" value="1">
<label class="radio-label">Option 1</label>
</div>
<div class="form-item" id="form-item-hi_status2">
<label for="input-status2" ></label>
<input class="radio-input" type="radio" id="input-hi_status2" name="input-hi_status" data-label="Option 2" data-mask="radiobutton" value="2">
<label class="radio-label">Option 2</label>
</div>
<div class="form-item" id="form-item-hi_status3">
<label for="input-status3" ></label>
<input class="radio-input" type="radio" id="input-hi_status3" name="input-hi_status" data-label="Option 3" data-mask="radiobutton" value="3">
<label class="radio-label">Option 3</label>
</div>
Related
I am using basic HTML to create two different divs, each having some checkboxes as options.(Basically I'm creating a test module). I have checked some checkboxes of the first div. Now, when I go to the second div, and click on the text i.e the label of some checkboxes, the corresponding checkboxes of the first div are getting unchecked. This should not happen. Please help me out
Sorry guys. Did not post the code. These are two different divs
First One:
<div class="form-check">
<input class="form-check-input" type="checkbox" name="csuite_2" id="opB" value="B">
<label class="form-check-label" >
Daily
</label>
</div>
<br/>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="csuite_2" id="opC" value="C">
<label class="form-check-label" >
Once a month
</label>
</div>
Second One
<div class="form-check">
<input class="form-check-input" type="checkbox" name="expectation_3" id="opB" value="B">
<label class="form-check-label" >
Fund Manager
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="expectation_3" id="opD" value="D">
<label class="form-check-label" >
Launching my own startup
</label>
</div>
<br/>
I have tried not wrapping the label to the checkbox and it works fine. But is there a way I can do it by wrapping the label and stopping this thing from happening?
I hope this is your problem.
Basically its because of the similar id & for.
As you can see in the below code I have used Bike & Car as id in "div1" and the same id's are being used in the "div2". So make sure to give a unique id and corresponding for values.
<!DOCTYPE html>
<html>
<body>
<div class="div1">
<label for="Bike">
<input id="Bike" type="checkbox"> I have a bike
</label><br>
<label for="Car">
<input id="Car" type="checkbox"> I have a car
</label><br>
<div>
<br><br><br>
<div class="div2">
<label for="Bike">
<input id="Bike" type="checkbox"> I have a bike
</label><br>
<label for="Car">
<input id="Car" type="checkbox"> I have a car
</label><br>
<div>
</body>
</html>
I have two radio buttons with an input text for each radio button, where a person selects a radio button and enters text.
The question is: How do I get the typed text for the selected radio button?
<div class="form-group">
<label for="textNome" class="control-label">Type text</label>
</div>
<div class="radio">
<label><input type="radio" name="mode" value="one" checked /> Selection
1</label>
<input id="end" class="form-control" type="text">
</div>
<div class="radio">
<label><input type="radio" name="mode" value="two"checked /> Selection
2</label>
<input id="end" class="form-control" type="text">
</div>
You could try this using jQuery:
console.log($("input[type='radio']:checked").next());
Bear in mind that since these are radio buttons, you shouldn't label both as checked.
below is the code for my radio buttons,
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_north autocomplete='off'>North
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_south" autocomplete='off'>South
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_east" autocomplete='off'>East
</label>
and below is my javascript,
var form = document.getElementById("info_form");
alert(form.elements["radio_north"].value);
but I get 'on' on alert, instead of north, south or east. I tried my best but cannot figure out the reason.
Your HTML elements don't have a value attribute set, so you can't get North using .value
If you're trying to get North from the parent label tag, you can access it this way:
JS
var form = document.getElementById("info_form");
console.log(form.querySelector("#radio_north").parentNode.innerText);
HTML (note there was a missing " in your question)
<form id="info_form">
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_north" value="north" autocomplete='off'>North
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_south" autocomplete='off'>South
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_east" autocomplete='off'>East
</label>
</form>
JS Fiddle Example
https://jsfiddle.net/csqgq1qh/
Hope that helps!
EDIT
If you need to get the value of the radio, you first have to assign a value attribute. Once you have that, you can get the checked radio's value using some JavaScript.
HTML
<form id="info_form">
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_north" value="north" checked autocomplete='off'>North
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_south" value="south" autocomplete='off'>South
</label>
<label class="radio-inline">
<input type="radio" name="optradio" id="radio_east" value="east" autocomplete='off'>East
</label>
</form>
<button id="clicker">Get Value</button>
JS
var form = document.getElementById("info_form");
console.log(form.querySelector("input[name='optradio']:checked").value);
/* use an event listener to alert the value when the button is clicked */
document.querySelector("#clicker").addEventListener('click', function() { alert(form.querySelector("input[name='optradio']:checked").value); } )
Updated JSFiddle
https://jsfiddle.net/csqgq1qh/2/
i am working on html and CSS. i have to add 5 radio buttons to my page and i have added within <label> tag. but when i look for the page. it shows all the radio buttons selected and also i am unable to unselect it. the thing is i need only one radio button selected at a time. here is my code.
<label class="radio"><input type="radio"> Pepse</label>
<label class="radio"><input type="radio"> Coke</label>
<label class="radio"><input type="radio">Mirinda</label>
<label class="radio"><input type="radio">Maaza </label>
radio buttons require a common name. If you don't give them a name attribute, each radio button essentially becomes a one-way checkbox. You can select them, but you can't UNselect them.
<input type="radio" name="foo" value="1" />
<input type="radio" name="foo" value="2" />
<input type="radio" value="3" />
In this case, the two foo radio buttons will be linked internally because they are both named the same, but the one with value 3 will be completely independent and act as your are.
Add a group name.
jsFiddle
<label class="radio"><input name="drinks" type="radio">Pepse</label>
<label class="radio"><input name="drinks" type="radio">Coke</label>
<label class="radio"><input name="drinks" type="radio">Mirinda</label>
<label class="radio"><input name="drinks" type="radio">Maaza </label>
<label class="radio"><input name="drinks" type="radio">Milk Frothers</label>
1.agroup of radios need a name so that the browser know which one is selected
2.if u want to put the label outside of the input u can use the for attribute
to tell the browser that this label is for that radio with the same id
<label for="a">a</label>
<input type="radio" name="aname" id="a" value="a"><br>
<label for="b">b</label>
<input type="radio" name="aname" id="b" value="b"><br>
<label for="c">c</label>
<input type="radio" name="aname" id="c" value="c"><br>
<label for="d">d</label>
<input type="radio" name="aname" id="d" value="d"><br>
but i also prefer radios inside labels so
<label><input type="radio" name="aname" value="a">a</label><br>
<label><input type="radio" name="aname" value="b">b</label><br>
<label><input type="radio" name="aname" value="c">c</label><br>
<label><input type="radio" name="aname" value="d">d</label><br>
<label><input type="radio" name="aname" value="e">e</label><br>
3.in a common way they also need a value, except ur using js
<label><input type="radio" name="aname">a</label><br>
<script>
document.write(document.getElementsByTagName('label')[0].childNodes[1].nodeValue)
</script>
writes a after <br>
I've got multiple sets of radio buttons and am trying to use the .find() function to dynamically find the value of radio buttons in the same grouping.
However, it keeps returning undefined.
<fieldset>
<div id="border1">
<input id="radio1a" type="radio" id="set1" class="animals radio" value="Zebra">
<input id="radio1b" type="radio" id="set1" class="animals radio" value="Lion">
</div>
<div id="border2">
<input id="radio2a" type="radio" id="set2" class="fruit" value="Oranges">
<input id="radio2b" type="radio" id="set2" class="fruit" value="Grapes">
</div>
</fieldset>
<fieldset>
<div class="border1">
<input id="radio3a" type="radio" id="set3" class="animals radio" value="Monkey">
<input id="radio3b" type="radio" id="set3" class="animals radio" value="Parrot">
</div>
<div class="border2">
<input id="radio4a" type="radio" id="set4" class="fruit radio" value="Bananas">
<input id="radio4b" type="radio" id="set4" class="fruit radio" value="Cherries">
</div>
</fieldset>
(Sorry, didn't mean to put the same IDs. Was a copy/paste.)
I'm trying to use jquery to dynamically find the values:
$(".animals .radio").change(function()
{
alert($(this).closest('fieldset').find('.fruit').val());
etc.
}
But it keeps returning undefined
Also tried:
$(this).closest('fieldset').find('.fruit:checked').val()
Is there another way I should be approaching this?
I don't want to have to write code for every single set of radio buttons.
$(".animals .radio") is not the query you are looking for, it should be $(".animals.radio") (no white space between classes).
$(".animals .radio") looks for an element with class "radio" inside an element with class "animals".
It should .animals.radio, not .animals .radio.
.animals.radio means these two classes belongs to same element. (in your case this is right)
.animals .radio means .animals is ancestor of .radio.
$(".animals.radio").change(function() {
alert($(this).closest('fieldset').find('.fruit').val());
});
AND ONE THINK, YOUR CODE HAVE DUPLICATE IDS, AVOID IT.
How about not using id="" twice, and setting a type="radio" on those inputs for starters ?
You are also using the same ID for multiple elements, stop that ?
It should probably be :
<fieldset>
<div id="border1">
<input type="radio" id="radio1a" name="set1" class="animals radio" value="Zebra" />
<input type="radio" id="radio1b" name="set1" class="animals radio" value="Lion" />
</div>
<div id="border2">
<input type="radio" id="radio1c" name="set2" class="fruit" value="Oranges" />
<input type="radio" id="radio1d" name="set2" class="fruit" value="Grapes" />
</div>
</fieldset>
<fieldset>
<div class="border1">
<input type="radio" id="radio2a" name="set3" class="animals radio" value="Monkey" />
<input type="radio" id="radio2b" name="set3" class="animals radio" value="Parrot" />
</div>
<div class="border2">
<input type="radio" id="radio2c" name="set4" class="fruit radio" value="Bananas" />
<input type="radio" id="radio2d" name="set4" class="fruit radio" value="Cherries" />
</div>
</fieldset>
To get both values :
$('input[type="radio"]').on('change', function() {
$(this).closest('fieldset').find('.fruit').each(function() {
alert(this.value);
});
});
To get only the one that is checked :
$('input[type="radio"]').on('change', function() {
var elm = $(this).closest('fieldset').find('.fruit').filter(':checked');
alert(elm.value);
});
$(".animals .radio") is getting you all the elements with class radio that have parents with class animals.
You want elements with both classes animals and radio, which is like $(".animals.radio")