I have a simple form and wanted to highlight the focused labels by changing their background colors, but the jquery doesnt seem to work here.
The console does not show any errors. Could someone please help me on this?
<form action="" method="POST" id="qrForm">
<label for="enter1">Enter<input id='enter1' type="radio" name="enter"></label>
<label for="enter2">Exit<input id='enter2' type="radio" name="enter"></label><br>
<label for="device1">Took a device<input id="device1" type="radio" name="device"></label>
<label for="device2">Returned a device<input id="device2" type="radio" name="device"></label>
</form>
<script>
$("label").focus(function(){
$(this).css('background-color', '#00CC66');
});
</script>
I could actually finish it by adding/removing a class but I wonder why this one isn't working.
why use js when you can do it in CSS?
label:focus {
background-color: #00cc66;
}
you also want to add tabindex=0 if you want your label elements to be focusable though, as if you e.g. click on a label, the focus is moved to the related input element
Alternatively, you can use the css next sibling selector as below:
html:
<input type="text" id="foo" class="foo"><label for="foo">label</label>
and the css:
.foo:focus + label {
background-color: #00cc66;
}
or play with different markup and css selectors
You cannot trigger focus for a label using .focus() instead do it with input, Check here
$("input").focus(function(){
$('label').css('background', '#00CC66');
});
or
$("input").focus(function(){
$(this).closest('label').css('background', '#00CC66');
});
try this as you can't use focus on label -
$( "form input:radio" ).focus(function(){
$(this).parent('label').css('background-color', '#00CC66');
});
I want to hide an element and a label based on value:
My html code looks like this
<form id="wrapper">
<label>
<input type="checkbox" value="Slider">
Slider
</label>
</form>
So using jquery i can find an input value that contains value="Slider" but the label still remains, because it it doesn't contain any id or class and I can't add anything there, so how can I hide it
$('#wrapper').find("input[value='Slider']").each(function(){
$(this).hide()
});
Here is a JSFIDDLE.
You need to hide the parent label element to hide input element and its sibling text:
$('#wrapper').find("input[value='Slider']").closest('label').hide();
Use .has() method to checking children of element.
$("label").has("input[value='Slider']").hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input type="checkbox" value="Slider">
Slider
</label>
<label>
<input type="checkbox" value="Slider2">
Slider2
</label>
You can try this:
$('#wrapper').find("input[value='Slider']").each(function(){
// $(this).hide(); If you want to hide input too
$(this).parent().hide();
});
I have 3 radio buttons in my web page, like below:
<label for="theme-grey">
<input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
<input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
<input type="radio" id="theme-green" name="theme" value="green" />Green</label>
In jQuery, I want to get the value of the selected radio button when any of these three are clicked. In jQuery we have id (#) and class (.) selectors, but what if I want to find a radio button by its name, as below?
$("<radiobutton name attribute>").click(function(){});
Please tell me how to solve this problem.
This should do it, all of this is in the documentation, which has a very similar example to this:
$("input[type='radio'][name='theme']").click(function() {
var value = $(this).val();
});
I should also note you have multiple identical IDs in that snippet. This is invalid HTML. Use classes to group set of elements, not IDs, as they should be unique.
To determine which radio button is checked, try this:
$('input:radio[name=theme]').click(function() {
var val = $('input:radio[name=theme]:checked').val();
});
The event will be caught for all of the radio buttons in the group and the value of the selected button will be placed in val.
Update: After posting I decided that Paolo's answer above is better, since it uses one less DOM traversal. I am letting this answer stand since it shows how to get the selected element in a way that is cross-browser compatible.
$('input:radio[name=theme]:checked').val();
another way
$('input:radio[name=theme]').filter(":checked").val()
This works great for me. For example you have two radio buttons with the same "name", and you just wanted to get the value of the checked one. You may try this one.
$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();
The following code is used to get the selected radio button value by name
jQuery("input:radio[name=theme]:checked").val();
Thanks
Adnan
For anyone who doesn't want to include a library to do something really simple:
document.querySelector('[name="theme"]:checked').value;
jsfiddle
For a performance overview of the current answers check here
I found this question as I was researching an error after I upgraded from 1.7.2 of jQuery to 1.8.2. I'm adding my answer because there has been a change in jQuery 1.8 and higher that changes how this question is answered now.
With jQuery 1.8 they have deprecated the pseudo-selectors like :radio, :checkbox, :text.
To do the above now just replace the :radio with [type=radio].
So your answer now becomes for all versions of jQuery 1.8 and above:
$("input[type=radio][name=theme]").click(function() {
var value = $(this).val();
});
You can read about the change on the 1.8 readme and the ticket specific for this change as well as a understand why on the :radio selector page under the Additional Information section.
If you'd like to know the value of the default selected radio button before a click event, try this:
alert($("input:radio:checked").val());
You can use filter function if you have more than one radio group on the page, as below
$('input[type=radio]').change(function(){
var value = $(this).filter(':checked' ).val();
alert(value);
});
Here is fiddle url
http://jsfiddle.net/h6ye7/67/
<input type="radio" name="ans3" value="help">
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">
<input type="radio" name="ans2" value="test">
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">
<script type="text/javascript">
var ans3 = jq("input[name='ans3']:checked").val()
var ans2 = jq("input[name='ans2']:checked").val()
</script>
If you want a true/false value, use this:
$("input:radio[name=theme]").is(":checked")
Something like this maybe?
$("input:radio[name=theme]").click(function() {
...
});
When you click on any radio button, I believe it will end up selected, so this is going to be called for the selected radio button.
I you have more than one group of radio buttons on the same page you can also try this to get the value of radio button:
$("input:radio[type=radio]").click(function() {
var value = $(this).val();
alert(value);
});
Cheers!
can also use a CSS class to define the range of radio buttons and then use the following to determine the value
$('.radio_check:checked').val()
This worked for me..
HTML:
<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>
Jquery:
$(".radioClass").each(function() {
if($(this).is(':checked'))
alert($(this).val());
});
Hope it helps..
$('input:radio[name=theme]').bind(
'click',
function(){
$(this).val();
});
You might notice using class selector to get value of ASP.NET RadioButton controls is always empty and here is the reason.
You create RadioButton control in ASP.NET as below:
<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />
And ASP.NET renders following HTML for your RadioButton
<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>
For ASP.NET we don't want to use RadioButton control name or id because they can change for any reason out of user's hand (change in container name, form name, usercontrol name, ...) as you can see in code above.
The only remaining feasible way to get the value of the RadioButton using jQuery is using css class as mentioned in this answer to a totally unrelated question as following
$('span.radios input:radio').click(function() {
var value = $(this).val();
});
My problem is fairly simple. I'm using a template to do styling. The way the template handles form inputs is it wraps them in span tags. To select the radio button, you have to change the class of the span to "checked". Using checked="checked" or checked in the input does not work.
Example:
<label class="radio">
<div class="radio" id="uniformed-undefined">
<span class="checked">
<input type="radio" name="grow" value="slash">
</span>
</div>
How can I target that <span class="checked"> based on the input name "grow" and the value "slash" ?
I've looked into .before() but I'm not sure that's the correct answer.
jQuery multiple attribute selector
and jQuery parent
$("input[name='grow'][value='slash']").parent("span");
$("span.checked:has(input[name='grow'][value='slash'])")
JS Fiddle: http://jsfiddle.net/RgN7H/1
I have 2 styles radio buttons with Enable / Disable, please check below..
<p class="switch-options">
<label class="cb-enable selected" data-id="company_slogan_check">
<span>Enable</span>
</label>
<label class="cb-disable" data-id="company_slogan_check">
<span>Disable</span>
</label>
<input id="company_slogan_check" class="checkbox" type="hidden" value="0" name="company_slogan_check">
<input id="company_slogan_check" class="checkbox main_checkbox" type="checkbox" value="1" name="company_slogan_check" checked="checked">
</p>
and I want to check if the "Enable" button is clicked I want to hide some DIV within the code. I am trying with the following code but nothing works..
jQuery('#company_slogan_check').click(function() {
alert('sssss');
});
it doesnt even respond to the click.. can someone please help..
data-id is not the same as an id, to which the css selector #something would apply to id="something".
It would be easier to use .switch-options input
thanks guys, I did another workaround.. cheers
if($(this).attr('data-id') == "company_slogan_check")
alert('clicked');
first of all ID's need to be unique as already mentioned..
second your not using radio buttons u use a checkbox..
and way not try the ":checked" ?
something like this:
$("#company_slogan_check").change(function(){
if($(this).is(':checked')){
// your function
}
});
hope this was helpful