I am passing the selected value to the jquery from jquery in passing to the url to the next page, this is how my check box looks like:
<label class="checkbox">
<input type="checkbox" value="male" id="gender" name="gender" /> Male
</label>
<label class="checkbox" style="margin:-25px 0 0 100px">
<input type="checkbox" value="female" id="gender" name="gender" /> Female
</label>
<label class="checkbox" style="margin:-20px 0 0 205px">
<input checked type="checkbox" value="all" id="gender" name="gender"> All
</label>
my jquery:
var gender = $('input[name=gender]:checked').map(function(){
return $(this).val();
}).get();
alert(gender);
My problem is for example :
When I select the gender male it passes to jquery as 'male,' but my problem is here when I unchecked the male and check the female then it passes to jquery as female,male, it is not passing the value which is selected now it is passing the value with pervious one, can any one guide me how to solve this.
Use jQuery change event as follows
$('input[name=gender]').on('change',function(){
var gender = $('input[name=gender]:checked').map(function(){
return $(this).val();
}).get();
alert(gender);
});
DEMO
First of all: an id must be unique, as soon as there are two elements with same id (like "gender"), results are arbitrary random.
And: use radio button and you're done w/o any JS or jQuery:
<label class="checkbox">
<input type="radio" value="male" id="gender_m" name="gender" /> Male
</label>
<label class="checkbox" style="margin:-25px 0 0 100px">
<input type="radio" value="female" id="gender_f" name="gender" /> Female
</label>
<label class="checkbox" style="margin:-20px 0 0 205px">
<input checked type="radio" value="all" id="gender_a" name="gender"> All
</label>
And if you want the radios look like check boxes, see this post
Related
I am wondering how can I use Radio button as a toggle in Angular2.
What I need is if Radio button value is changes I want to get that value without creating a form.
Any help please.
[edit]:
I did:
<div class="form-group">
<label for="gender">Gender</label><br>
<input type="radio" name="gender" value="male" checked> Male
<input type="radio" name="gender" value="female"> Female<br>
</div>
in a form and getting value of gender in a form deails. But I dont want to use form for this.
in your component
public gender = [
'male',
'female'
];
onGenderChange(e) {
console.log(e);
}
in your html
<div *ngFor="let value of gender">
<input (change)="onGenderChange($event.target.value)" type="radio" name="gender" value="{{ value }}">{{ value }}
</div>
i want to retrieve radio button value in checked radio button in jsp page
<% String gen=rs.getString("gender");session.setAttribute("gender", gen); %>
<input type="radio" name="gender" id="male" value="male" />male
<input type="radio" name="gender" id="female" value="female" />Female
<input type="radio" name="gender" id="other" value="other" />
You can use el to add checked attribute on condition
<input type="radio" name="gender" id="male" value="male" ${gen eq "male"?'checked="checked"':''}/>
<input type="radio" name="gender" id="female" value="female" ${gen eq "female"?'checked="checked"':''}/>Female
<input type="radio" name="gender" id="other" value="other" ${gen eq "other"?'checked="checked"':''}/>
You can check for each option if this option's value is equal to the gender. If so add checked="checked"
ex:
<input type="radio" name="gender" id="male" value="male" <% Response.Write( (gen == "male") ? ' checked="checked"' : '' ) %> />male
or you can take a look at this question
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 have a working code where i output the price using value="" but i need a way to get data from data-price="" so that i can use value="" to store SKUs.
Working demo here http://jsfiddle.net/pe2gpp01/21/
What does this code do? It returns fixed price for female for all products. Price changes for Male only.
<div>
<label class="product">Product</label>
<span>
<input name="category" type="radio" value="10" >
<label>Product A</label>
<input name="category" type="radio" value="20" checked>
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40" >
<label>Product D</label>
</span></div>
<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="male" checked>
<label>Male</label>
<input name="gender" type="radio" value="female">
<label>Female</label>
</span></div>
<span>Show Price: <span id="price"></span></span>
<script>
$(function() {
$('[type="radio"]').on('change', function() {
var price = $('[value="female"]')[0].checked
? 10
: $('[name="category"]:checked').val();
$('#price').text(price);
}).change();
});
</script>
I need data from this
<input name="category" type="radio" value="SKU001" data-price="10">
<label>Product A</label>
<input name="category" type="radio" value="SKU002" data-price="20" checked>
<label>Product B</label>
<input name="category" type="radio" value="SKU003" data-price="30">
<label>Product C</label>
<input name="category" type="radio" value="SKU004" data-price="40">
<label>Product D</label>
You have to use data method to get data-price attribute
$('[name="category"]:checked').data('price')
This code is saying if you have a value female element checked, then set the price to 10, otherwise price is the value in named category.
var price = $('[value="female"]')[0].checked
? 10
: $('[name="category"]:checked').val();
... so, this ...
var price = $('[value="female"]')[0].checked
? 10 + parseInt($('[name="category"]:checked').val(),10)
: $('[name="category"]:checked').val();
... will add 10 to the category value (note the user of the parseInt function for proper addition.
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>