Develop Reference

Weird a+label+input interaction

$(document).ready(function () {
$('a').click(function(e) {
console.log('a clicked');
if ($('.is_force:checked').length) {
$(this).closest('div').find('input').click();
}
e.preventDefault();
});
$('label[for]').click(function(e) {
console.log('label clicked');
});
$('input[id]').click(function(e) {
var $input = $(this);
//if ($input.is('[type=radio]')) $input.prop('checked', 'checked');
console.log('input clicked', $input.is(':checked'));
setTimeout(
function() {
console.log($input.is(':checked'));
},
0
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input class="is_force" type="checkbox"> Force checkbox/radio click when clicking on link</label>
<br>
<br>
<div>
<input id="c" type="checkbox" name="checkbox" value="1">
<label for="c">
Text
Link
</label>
</div>
<br>
<div>
<input id="r1" type="radio" name="radio" value="1">
<label for="r1">
Text
Link
</label>
</div>
<div>
<input id="r2" type="radio" name="radio" value="2">
<label for="r2">
Text
Link
</label>
</div>
Open you console to see the output.
When you click on checkbox/radio, everything works as intended.
It works as intended when you click on labels also.
But, when you click on a link inside a label: link clicks, label clicks, but input associated with the label does not get clicked.
You can "fix" this by programmatically clicking associated input from inside link click handler. To see this in action, check the top checkbox.
The fix works OK for checkboxes. But does not for radios: inside input click handler, the first console.log() shows that clicked radio is not checked. But the second console.log() from inside setTimeout() shows that it actually is checked.
This again can be "fixed" by checking the radio programmatically - see the commented line inside input click handler. But that gets way too hacky.
I have a few questions about this:
Why corresponding input doesn't get clicked when a link inside a label is clicked?
Can this be fixed "the right way" without hacky programmatic clicks?
Why radio input "checks" with a delay, while a checkbox works OK?
How to fix this without even more hacky "checked" property setting?

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

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

Disabling radio button after click

I need some help please
This is the html
<div>
<p>match1</p>
teamA <input type="radio" name="match1" onclick="update('ab');" />
teamB <input type="radio" name="match1" onclick="update('ba');" />
<p>match2</p>
teamC <input type="radio" name="match1" onclick="update('ad');" />
teamD <input type="radio" name="match1" onclick="update('dc');" />
</div>
<script>
update(results){.................}
</script>
I have this html so what I want I to know is
How can I disable the radio button once the user clicks on it
because the update() function changes the values when user clicks on radio button
if he keeps clicking like that then values change each time he clicks
or if he clicks on sibling radio button
so please can anyone tell me how to disable radio button
once user clicks on it
like for instance in match1
if user selects teamA radio button then i want to disable both teamA and teamB radio buttons
same for match2 if he clicks then disable the clciked radio and sibling radio aswell
Thanks for reading this can anyone help me please
I can use plain js, jquery or libraries

Use this:
$(":radio").click(function(){
var radioName = $(this).attr("name"); //Get radio name
$(":radio[name='"+radioName+"']").attr("disabled", true); //Disable all with the same name
});
What we're doing, is, when a user clicks a radio button, disable all radios with the same name.
Hope this helps.
Cheers.

Using Javascript, you can use a solution like this:
document.getElementById("IDOfButtonElement").onclick = function(){
document.getElementById("IDOfButtonElement").disabled=true;
}

jsfiddle example
http://jsfiddle.net/nhZXg/
code
$(":radio").click(function(){
$(this).attr('disabled','disabled');
});
this is the general way of doing it.
jQuery("input:radio").attr('disabled',true);
or
jQuery("input:radio").attr('disabled','disabled');

Try this:
this.setAttribute('disabled','disabled');
I suggest you to add label tag around your inputs. It cause when user clicks on the text radio button changes.
<label>teamA <input type="radio" name="match1" onclick="update('ab');" /></label>

onclick="update('ad', this);"
function onclick(word, element){
$(element).attr('disabled', 'disabled');
}

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.