Develop Reference

How change event work on radio buttons

the change function catch only if radio is checked but not when its unchecked. Why? Should it behave like that? When I click the radio button the other is unchanging so the event should fire, right? Below is the code and jsfiddle. Do I do anything wrong?
HTML:
Option1 <input type="radio" name="choice" id="op1" checked/>
Option2 <input type="radio" name="choice" id="op2"/>
<br><br>
<span id="sp1">Option1</span><br>
<span id="sp2" style="display: none;">Option2</span>
Javascript:
var op2 = $('#op2');
var sp1 = $('#sp1');
var sp2 = $('#sp2');
op2.change(function(){
if(op2.is(':checked')){
sp1.hide();
sp2.show();
}
else{
sp2.hide();
sp1.show();
}
});

You can run your event handler when either checkbox changes:
$('#op2, #op1').change(...
Here's a demo: http://jsfiddle.net/TCt82/
Another way to select this would be by element name since both checkboxes need to have the same name attribute. Selecting by ID will be faster (although you won't be able to see the difference).
UPADTE
If anyone knows the exact reason the change event does not fire on a checkbox after it's been de-selected, posting it as a comment or answer would be great.

Change your selector to get it using the name
$("input[name='choice']").change(function(){
if(op2.is(':checked')){
sp1.hide();
sp2.show();
}
else{
sp2.hide();
sp1.show();
}
});
Working sample http://jsbin.com/UPILuCe/1

Disable single checkbox after ButtonSet is applied

If I apply buttonset to a list of checkboxes using JQuery UI, how do i then disable a single checkbox from the list?
HTML
<div id="options">
<input id="one" type="checkbox" value="1"/><label for="one">One</label>
<input id="two" type="checkbox" value="2"/><label for="two">Two</label>
</div>
Javascript
$('#options').buttonset();
In the above example after buttonset is applied, I want to disable only checkbox with label Two.
Edit
Here is the JSFiddle for the above example. Just by adding attribute disabled does not help.

You have to refresh the button widget after disabling the check box:
$("#two").prop("disabled", true).button("refresh");
Updated fiddle here.

$("#two").attr("disabled", "disabled");
//OR
$("#two").attr("disabled", true);

Getting a radio button immediately by clicking a label with jQuery

I've got some radio buttons styled to be hidden with the labels visible and styled as I want them.
The problem is when I click a label I don't get the radio button's value on the first click.
If you look here you can see what I mean: http://jsfiddle.net/bQwtK/1/
Is there a way to get the value on the first click?
ANSWER-
Thanks to asawyer and blocco- http://jsfiddle.net/bQwtK/14/

You can get the value with the code here:
$(".label_size").click(function()
{
alert($("#"+$(this).attr("for")).val());
})

Your code was broken - you missed a closing brace in your JavaScript.
http://jsfiddle.net/bQwtK/5/
Clicking the labels works. If you want the value of the radio buttons, remember that the click event refers to the label, not the radio button. You'll have to access the "for" attribute to get the radio button, and then get its value.

Hiya: your jsfiddle don't give any alert please see correct demo here": http://jsfiddle.net/NEu97/2/ & thank a sawyer : http://jsfiddle.net/NEu97/5/
Please let me know how it goes & hope this helps, :)
Jquery Code
$(".label_size").click(function()
{
alert(' clicked value =' + $(this).text());
alert(' correspong value =' + $('#'+$(this).attr('for')).val());
alert("D");
});
​
HTML
<div class="radio">(This is styled to be hidden)
<input name="size" class="radio_size" type="radio" id="radio_size_small" value="small "/>
<input name="size" class="radio_size" type="radio" id="radio_size_medium" value="medium"/>
<input name="size" class="radio_size" type="radio" id="radio_size_large" value="large"/>
</div>
<div class="radio_labels">
<label class="label_size" for="radio_size_small" id="label_size_small">SMALL</label>
<label class="label_size" for="radio_size_medium" id="label_size_medium">MEDIUM</label>
<label class="label_size" for="radio_size_large" id="label_size_large">LARGE</label>
</div>
​

JQuery Select a radio button (onclick)

I have a function using jquery that updates a form when an image is click.
I need to add to that function so that a specified radio button is selected.
How can I select a radio button using jquery please?
UPDATE:
I'll explain further...I have overlayed an image and hid the radio button...so what the user clicks on an image it will check the selected radio.
Here's how each radio looks like:
<label style="display: inline; " for="select_theme_a">
<img src="images/icons/theme1.png" />
<input checked="checked" class="select_control" id="select_theme_a" name="select_theme" type="radio" value="a" onclick="return submitForm();" style="display:none" />
</label>
There's 4 radio buttons .. 4 different images to click on.
Hope this helps

How can I select a radio button using jquery please?
You can use attr method like this:
$('#radio-id').attr('checked', true);

If radio element is inside same parent element as image than you can use this piece of code inside function that handles image click event:
$(this).parent().find(":radio").attr('checked', true);

HTML checkbox onclick called in Javascript

I am having a bit of trouble trying to figure out how to get a certain part of my code to work.
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this?
I tried to add the onclick of the input to the onclick of the label but that doesn't work.
Any suggestions/solutions would be wonderful.

How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
This will additionally catch users using a keyboard to toggle the check box, something onclick would not.

Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll() when you click on a label, right?
Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label
<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
Select All
</label>

You can also extract the event code from the HTML, like this :
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>
<script>
function selectAll(frmElement, chkElement) {
// ...
}
document.getElementById("check_all_1").onclick = function() {
selectAll(document.wizard_form, this);
}
</script>

jQuery has a function that can do this:
include the following script in your head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(or just download the jQuery.js file online and include it locally)
use this script to toggle the check box when the input is clicked:
var toggle = false;
$("#INPUTNAMEHERE").click(function() {
$("input[type=checkbox]").attr("checked",!toggle);
toggle = !toggle;
});
That should do what you want if I understood what you were trying to do.