Develop Reference

Can't change radio button selection

I have some tables (more than one), when I select one table by clicking on it, I need that the first radio button is selected.
It works fine, but if I want to change the option of the radio button i cant. It keeps always the first one marked.
Here is a fiddle with the issue:
https://jsfiddle.net/jzbm4j60/
$('table').click(function(event) {
$('table').removeClass('focus');
event.stopPropagation();
$(this).addClass('focus');
var $firstRadio = $(this).find('input:radio[name=rdGoFerrys]:first');
var $secondRadio = $(this).find('input:radio[name=rdBackFerrys]:first');
if ($firstRadio.is(':checked') === false) {
$firstRadio.prop('checked', true);
}
if ($secondRadio.is(':checked') === false) {
$secondRadio.prop('checked', true);
}
});

The click event on your inputs is bubbling up the DOM and triggering the click event you have on your table. Stop that behavior by using:
$('input').click(function(e) {
e.stopPropagation()
})

Deselect a radio option

I'm using the bootstrap radio buttons and would like to allow deselection of a radio group. This can be done using an extra button (Fiddle). Instead of an extra button, however, I would like to deselect a selected radio option if the option is clicked when it's active.
I have tried this
$(".btn-group label").on("click", function(e) {
var clickedLabel = $(this);
if ($(clickedLabel).hasClass("active"))
{
// an active option was clicked => deselect it
$(clickedLabel).children("input:radio").prop("checked", false)
$(clickedLabel).removeClass("active");
}
}
)
but there seems to be a race condition: the event of clicking the label that I use seems to be used by bootstrap.js to set the clicked label option to "active". If I introduce a timeout, the class "active" is removed successfully:
$(".btn-group label").on("click", function(e) {
var clickedLabel = $(this);
if ($(clickedLabel).hasClass("active"))
{
setTimeout(function() {
// an active option was clicked => deselect it
$(clickedLabel).children("input:radio").prop("checked", false)
$(clickedLabel).removeClass("active");
}, 500)
}
}
)
How can I toggle a selected option successfully without using a timeout?? Thank you for help.

Instead of using two method's preventDefault & stopPropagation, use return false, will work same.
The difference is that return false; takes things a bit further in
that it also prevents that event from propagating (or "bubbling up")
the DOM. The you-may-not-know-this bit is that whenever an event
happens on an element, that event is triggered on every single parent
element as well.
$(".btn-group label").on("click", function(e) {
var clickedLabel = $(this);
if ($(clickedLabel).hasClass("active"))
{
// an active option was clicked => deselect it
$(clickedLabel).children("input:radio").prop("checked", false)
$(clickedLabel).removeClass("active");
return false;
}
});

After messing with your code in jsfiddle for a while I figured out that a combination of preventDefault() and stopPropagation() does the trick.
Here's a fiddle
and the code:
$(".btn-group label").on("click", function(e) {
var clickedLabel = $(this);
if ($(clickedLabel).hasClass("active"))
{
// an active option was clicked => deselect it
$(clickedLabel).children("input:radio").prop("checked", false)
$(clickedLabel).removeClass("active");
e.preventDefault();
e.stopPropagation();
}
}
);

Check/uncheck input not working

If you click on buton it opens 3 checkbox (one that selects it all and two subinputs).
What I'm trying to do is that if the user clicks for example on Centro de dia the input remains checked and the other (buton in this case) gets unchecked. If the user clicks on buton the other gets unchecked, and if the user clicks on Check/uncheck all it obviously checks all or uncheck them all.
But right now if I click on one of the subinputs, it checks/unchecks but doesn't affect the other one.
This is the code i'm using:
$check_all = $('<label></label>')
.text(GeoMashup.opts.check_all_label)
.prop('for', 'gm-' + taxonomy + '-check-all')
.prepend(
$('<input type="checkbox" />').prop('id', 'gm-' + taxonomy + '-check-all')
.prop('checked', (default_off ? false : 'checked'))
.change(function () {
if ($(this).is(':checked')) {
$legend.find('input.gm-' + taxonomy + '-checkbox:not(:checked)').click();
} else {
$legend.find('input.gm-' + taxonomy + '-checkbox:checked').click();
}
})
Any ideas how to make it work that way?

You can use .prop() instead of .attr() if using Jquery 1.6 and above.

swapped radio overlaying each other after swapping

Something wrong with the event handler, as on mouse leave the div opens and closes 3 times.
also the radio that is swapped get over layed or offset.
I have tried everything, i think it has something to do with the way i am using the event.preventDefault();
UPDATE__
Menu opening 3x fixed, but the swapped radio in the div still overlaps any ideas?
http://www.apecharmony.co.uk
// RADIO BUTTON
$("input[name='domain_ext']").each(function () {
$("#domaindropradio1").attr('checked', 'checked');
var lbl = $(this).parent("label").text();
if ($(this).prop('checked')) {
$(this).hide();
$(this).after("<div class='radioButtonOn'>" + lbl + "</div>");
} else {
$(this).hide();
$(this).after("<div class='radioButtonOff'>" + lbl + "</div>");
}
});
$("input[type=radio]").change(function () {
$(this).siblings('.radioButtonOff').add('.radioButtonOn').toggleClass('radioButtonOff radioButtonOn');
});
// RIBBON RADIO DROPBOX
$('div.ribbonBoxarrow').click(function () {
$('.ribbonBoxarrow li').show('medium');
});
$('.ribbonBoxarrow li').mouseleave(function () {
$(this).hide('slow');
});
$("input[name='domain_ext']").parent('label').click(function () {
$('.ribbonBoxarrow li').hide('slow');
event.preventDefault();
});
//SWAP SECECTED RADIO
$("div.radiogroup2").on("click", ":radio", function () {
var l = $(this).closest('label');
var r = $('#radioselected');
r.removeAttr('id');
l.before(r.closest('label'));
$(this).attr('id', 'radioselected');
l.prependTo('.radiogroup1');
});

In response to:
the div opens and closes 3 times.
Your animations are triggering more events than you'd like. Also, your preventDefault() isn't preventing other click events from firing.
For your $("input[name='domain_ext']").parent('label') click event, try this:
$("input[name='domain_ext']").parent('label').click(function () {
$('.ribbonBoxarrow li').mouseleave();
event.stopImmediatePropagation();
});
For your second issue:
also the radio that is swapped get over layed or offset.
It looks like you're prepending radio buttons to an element with the radiogroup1 class, but you may want your radio buttons to be within the nested table element.

Solved, using tables to hold elements is what was causing the problem. If it is required then you would have to target the cell for swap.

I need an event trigger for a radio button for when it is unchecked because another button is checked

I need an event trigger for a radio button for when it is unchecked because another button is checked.
The code below should demonstrate my dilemma.
If you will notice, there is an onchange event trigger atttached to each radio button and checkbox in the html code. In theory a change in state from checked to unchecked should fire the onchange event.
This happens as expected with the check boxes. If you check one, you get the alert, 'Your item is changed to checked'. If you uncheck it, you get the alert, 'Your item is changed to unchecked'.
With the radio buttons, when you check button one, you get, as expected, the alert, 'Your item is changed to checked' since the button changed from unchecked to checked. However, when you check the second button and the first radio button is changed from checked to unchecked the "onchange" event trigger does not fire and the 'else' alert is not triggered.
So this issue for me is what event is triggered when a radio button gets unchecked by another button being checked?
I appreciate everyone's assistance on this.
--Kenoli
<html>
<head>
<title></title>
<script type="text/javascript">
function clickAction() {
//alert ('Your item changed');
if (this.checked == true) {alert ('Your item is changed to checked');}
else if (this.checked == false) {alert('Your item is changed to unchecked');}
}
</script>
<script type="text/javascript">
function initializeToggles() {
var button1= document.getElementById('button1');
button1.onchange = clickAction;
var box1= document.getElementById('box1');
box1.onchange = clickAction;
var box2= document.getElementById('box2');
box2.onchange = clickAction;
}
</script>
<script type="text/javascript">window.onload = initializeToggles;</script>
</head>
<body>
<input type="radio" name="testRadio" id="button1" >Button one<br/>
<input type="radio" name="testRadio" id="button2" >Button two<br/><br/>
<input type="checkbox" name="testCheckbox" id="box1" >Box one<br/>
<input type="checkbox" name="testCheckbox" id="box2" >Box two<br/><br/>
</body>
</html>

I came here looking for a quick solution for this type of problem, and nuc's answer helped me come up with this:
$(document).ready(function(){
$('input[type=radio]').change(function() {
var selected = $(this);
$('input[type=radio]').each(function() {
if $(this).attr('id') != selected.attr('id') {
console.log( $(this).attr('value') + ' was deselected because ' + selected.attr('value') + ' was clicked.')
}
});
});
});

There is no event for when a radio button gets unchecked. You might be able to use the onpropertychange event, however that's not a standardised event so it might only work in Internet Explorer.
The safest way would be to take care of that in the onchange event. If you want to know which radio button was unchecked, you would have to keep a reference to the currently checked element in a variable.

I slightly modified rthbound's code to handle a group of radio input's, in my case enclosed in a <table>. But this could easily altered for a <div>. Also this code is more compliant with jQuery 1.9. A common class would be better, to take the class from the selected radio and find other radio inputs with the same class, but I'm working with ASP.NET and this is quicker and easier for me.
$(document).ready(function(){
$(document).on("change", "input[type='radio']", function () {
var selected = $(this);
$(this).closest("table").find("input[type='radio']").each(function () {
if ($(this).attr("id") !== selected.attr("id")) {
console.log($(this).attr("value") + " was deselected because " + selected.attr("value") + " was clicked.");
}
});
});
});

I've solved this issue in a generic way:
whenever a radio button is changed:
if they were triggered by this system - we don't want unending loops.
find all its radio button friends
trigger change on them
then I can test for whether the radio button was checked or unchecked.
$(function(){
$('body').on('change', 'input[type="radio"]', function(e, by_other) {
if (!by_other) {
$("input[type='radio'][name='" + $(this).attr('name') + "']")
.not(this)
.trigger('change', true)
}
}
}
(I did translate it from coffeescript to javascript for ya'll.)

The Radio buttons have same name, so we can select them by name.
Because .change() is not effected when the radio is unchecked, so we use .click() instead of.
$('input[name="your-radio-name"]').click(function() {
var $radios = $('input[name="your-radio-name"]');
for (var i = 0; i < $radios.length; i++) {
var radio = $radios[i];
if (radio != this) {
radio = $(radio);
// Process for unchecked radios here
}
}
// Now, process for checked radio
// alert(this.value + ' is checked'); Or
alert($(this).val() + ' is checked');
});