How to switch styles for labels using jQuery - javascript

I have checkbox. I want to switch the style of the div containing the checkbox, if the checkbox is checked.
<label for="ids">
<div>
<img src="img/87_1180.jpg">
<h4>Name</h4>
<input name="ids" id="ids" type="checkbox">
</div>
</label>
When user clicks on the label, the checkbox gets checked. I want to add class if the checkbox is checked.
I appreciate any help.

$("#ids").click(function() {
$(this).parent().toggleClass("yourClassName");
});

Josh,
Actually usually the correct way to use a label would be something like this:
<label for="ids">Name</label>
<input name="ids" id="ids" type="checkbox" />
I don't think it's common practice to put the input within the label according to W3C standards, see:
http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL
While it might validate the way you wrote the code, it's much harder to control style specifically.
Try this code to change the label:
$("#ids").click(function() {
$('label[for="' + $(this).attr('name') + '"]').toggleClass('myClass');
});

Related

Having trouble using jQuery change() with checkboxes

I'm trying to add/remove a class and attribute to a few labels and input boxes depending on whether or not a checkbox is checked or not.
By default my check box is set up to be not checked. Here is my existing code...
$("#built").change(function()
{
$("label.readonly").removeClass("readonly");
$("input.readonly").removeAttr("readonly");
}).change();
For some reason the event isn't firing. What am I doing wrong? Thanks!
Update:
Here is my html code
<label for="address1" class="readonly">Address Line 1</label>
<input type="text" name="address1" class="readonly" readonly="readonly" value="" />
Also, upon the check box being unchecked I would like the labels and inputs to revert back to its original state of having the readonly class and attribute respectively.
Remove the .change() after the function and add a ;.
eg:
$("#built").change(function(){
$("label.readonly").removeClass("readonly");
$("input.readonly").removeAttr("readonly");
});
There is no reason your code won't work, maybe just indentation or something like this.
Here is a jsfiddle with your function and it's working.
I just removed the line break like this:
$("#build").change(function() {
$("label.readonly").removeClass("readonly");
$("input.readonly").removeAttr("readonly");
});
Maybe there are other javascript problems somewhere else in the page?

How to hide checkbox text

I have been playing around with html lately and ran into a slight issue.
Let us say that there is a form with multiple elements on it. Some of those elements are checkboxes, and you want to hide the checkboxs and their corresponding text. How do you do this without hiding the entire form? The following is what I have tried so far:
<input type="checkbox" id=check1 status="display:none">Option 1<br>
But this hides the box and leaves the text "Option 1" still visible. How do I hide the text as well?
I would suggest using the <label>-tag around the whole thing:
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
This way you can hide the whole line and the user has the advantage that the checkbox toggles, if he clicks the text. You also gain in semantics.
Also note that status is not a valid attribute. For styling use style.
Wrap the input in a div and apply the "style" tag to the div.
<div style="display: none;">
<input type="checkbox" id="check1">Option 1<br>
</div>
you need to wrap it in a span/label and then hide it
<input type="checkbox" id=check1 style="display:none"><label for="check1" style="display:none">Option 1</label><br>
Place checkbox inside div and apply style to div
<div style="display:none"><input type="checkbox" id=check1>Option 1<br></div>
<span style="display:none"><input ...>Option 1</span>
or better
<label for="check1" style="display:none"><input id="check1"...>Option 1</label><br/>
I'm sure you mean style="display:none and not status, but here goes:
Your option text isn't inside the input, nor can it be (for a checkbox), so you'll have to wrap them in a container, then hide the container. Something like:
<div id="checkboxcontainer" style="display: none">
<input type="checkbox" id="check1">
Option 1
<br>
</div>
<input type="checkbox" id="check1" style="display:none">
<label for="check1">Option 1</label><br>
JS:
$('label[for="check1"]').hide();
try something like this
<label style="display:none"><input type="checkbox" id=check1 >Option 1</label>
Use the below to get your desired need.
Wrap the entirety with a label which will then allow you to use style="display:none to hide the label.
<label style="display:none"><input type="checkbox" id="check1">Option 1</label>
You also used status instead of style but by using the code above you'll do fine.
Okay, since the other answers were not that describing i can go ahead and be a little more pedagogic.
First of all, the code you have written is perfectly fine, however you lose some control over your content if it's not wrapped inside a HTML tag.
As all the other answers here wrote, you obviously need a label with your input tag:
<input type="checkbox" id="check1"><label for="check1" >Option 1</label>
You have got some different ways of using labels (which is recommended since this gives you more control over your content). My example above uses the "for" attribute, which is a pointer to the input ID to tell the browser what input field the label is for (quite obvious, eh?). You can also wrap your input inside the label (like all the other answers to this thread), which is the way some people prefers (including me):
<label for="check1"><input type="checkbox" id="check1">Option 1</label>
I saw an answer where the person who wrote some (what he called) JS which is code that hides the label with a wrapped input (i.e. the label AND the input is hidden). However, this was JS that is also using jQuery, so you need to implement that framework before you can use that code snippet:
$('label[for="check1"]').hide(); //This hides the label and the input at the same time if you wrap your input!
I recommend you to use the wrapped version of the markup, and implementing jQuery on your page and thereafter apply the codesnippet that is provided in this answer. That can give you the power to show/hide the inputs + labels on, for example, a click on a button or so. Feel free to ask me anything if you want some guidance. :)
/J.

jQuery - Populate closest hidden input with radio's value

I have the following HTML and jQuery to populate hidden fields within each <td> element:
<td>
<div id="sex_div" style="text-align: left; width:120;">
<input type="hidden" id="sex" value=""/>
<input type="radio" id="sex_male" name="sex_div" value="M"/><label for="sex_male">Male</label>
<input type="radio" id="sex_female" name="sex_div" value="F"/><label for="sex_female">Female</label>
</div>
</td>
The jQuery I have is as follows:
$("input :radio").click(function() {
$(this).siblings("input [type='hidden']").val($(this).val());
});
and obviously the buttonset,
$("#sex_div").buttonset();
This is just a small part of the whole form. The rest all looks similar.
Now the issue is that the hidden field is not being set when clicking/selecting a radio button. I have been struggling with this seemingly easy problem for two days now!
Thanks for any help!
$(this).siblings("input[type='hidden']").val($(this).val());
There should be no space between input and [type='hidden']. Spaces in selectors mean to search for descendant elements that match the next token.
you need to remove space in your selector
$("input:radio").click(function() {
$(this).siblings("input[type='hidden']").val($(this).val());
});

getting class attribute of radio button in IE

I need to get the class attribute of checked radio button, with name="radio".
Used the code that's working fine in Firefox, but fails in IE.
val = $('input:radio[name=radio]:checked').attr('class');
How can i accomplish this?
There is no psuedo-class :radio. I think you meant [type=radio].
As comments says, I think you should use type instead of name. But i think you have named your input as radio because you can find this specific input. If you just use type selector you will catch every single selected radio input on page.
<input type="radio" name="radio" class="ey" /> Male<br />
So, if your page have more forms, you should specify a parent or form to avoid conflicts. Set a id for your form and try to find it by form id and radio type like this:
<form id="myForm">
<input type="radio" name="radio" class="ey" /> Male<br />
</form>
val = $("#myform input[type='radio']:checked").attr('class');
I hope it can help you :)

In jQuery, how do I select an element by its name attribute?

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();
});

Categories

Resources