Develop Reference

Remove checkbox background color on change using jquery

I have a simple quiz in which user can answer multiple questions, now when the user checks the box I am adding a class for the background.
Here is jsfiddle:demo
Here is function
// here we add event handler for newly created checkboxes.
nextQuestion.find("input[type='checkbox']").on('change', function () {
if ($(this).is(":checked")) {
//add checkbox background when is checked
$(this).addClass("input-before");
//uncheck the checkbox if another checkbox is checked
$('#next').prop("disabled", false);
$('input.cb').not(this).prop('checked', false, function(){
//remove the background ...this is not working
$(this).removeClass("input-before");
})
} else {
$('#next').prop("disabled", true);
$(this).removeClass("input-before");
}
});
Now when user check another checkbox the other checkbox is unchecked but the background is still there\
I want to remove the background when Unchecked.
what do I need to change to get this working?

You can iterate through checkbox to add and remove the background class as given below
nextQuestion.find("input[type='checkbox']").on('change', function () {
.....
$("input[type='checkbox']").each(function () {
if (this.checked) {
$(this).addClass("input-before");
}else{
$(this).removeClass("input-before");
}
});
......
});

How can I toggle a radio button's checked state with jQuery?

As can be seen here, I've got this HTML:
<input type="radio" id="radbtnEmp" >rad btn</input>
...and this jQuery:
$('#radbtnEmp').click(function () {
alert("radbtnEmp clicked");
});
The alert does display when I click the radio button; However, clicking the radio button a second time does not toggle its state back to unchecked. How can I do that in jQuery?
I want to be able to respond to its state like this (or something similar):
if ($('#radbtnEmp').attr('checked', true)) {
// do stuff
} else {
// do other stuff
}
...but if the radiobutton is never checked/false, that doesn't work.

the radio buttons cannot be checked and unchecked..
For that you need to use checkboxes:
Html:
<input type = "checkbox" id = "myCheckBox">I am CheckBox</input>
jQuery:
$('#myCheckBox').on('click', function() {
if ($('#myCheckBox').is(':checked')) {
// code
}
else {
// code
}
})
Hope this helps

Set and reset text by clicking button jquery

There are some buttons at my page i.e button "one", button "two" etc. There is a text too which contains "Set This".
Requirements:
When user click on the button "One",
(a) the button should be turned to dark background color(Selected/Active state)
(b) Text, "Set this" should be changed to text according to clicking button's text. In this case, "Set this" will be changed to "Set One"
When user click on the button "One" again,
(a) the button should be returned to it's previous state(light background version)
(b) Changed text ("Set One") should be reset and returned back to default state("Set This")
Same requirements for other buttons. I could make the requirements 1 and 2(a) But I can't make 2(b). How can I make it?
My fiddle Work: http://jsfiddle.net/learner73/VFPLf/
$('.btn').click(function(){
$(this).toggleClass("active");
$('.changeText').text($(this).data("text"));
});

If I am understanding the problem correctly, this would probably be your best bet
$('.btn').click(function(){
$(this).toggleClass("active");
if ($('.changeText').text() == $(this).data("text")) {
$('.changeText').text("This");
} else{
$('.changeText').text($(this).data("text"))
}
});
JSFiddle

Fiddle Demo
$('.btn').click(function () {
var $this = $(this);//cache selector
$this.addClass('active').siblings().removeClass('active');//addClass to current element clicked and remove class from siblings
$('.changeText').text($this.data("text"));
});
.siblings()
.addClass()
.removeClass()

Like this?
$('.btn').click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
$('.changeText').text($(this).data("text"));
});

http://jsfiddle.net/prollygeek/Azw4t/2/
$('.btn').click(function () {
if(!$(this).hasClass('active'))
{
$(this).addClass('active').siblings().removeClass('active');
$('.changeText').text($(this).data("text"));
}
else if($(this).hasClass('active'))
{
$(this).removeClass('active')
$('.changeText').text("This");
}
});

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.

Javascript code does not work

I have a panel activated/deactivated with a checkbox (chk1)'On/Off'. This panel contains a checkbox (chk2) and a radio button (rbtn).
When the radio button (rbtn) is checked the checkbox must be disabled.
When the panel is disabled by unchecking the 'On/Off' checkbox, the radio button and the checkbox (chk2) are disabled.
The problem is that when I open the page with panel enabled, the code from javascript is executed, but when I open the page with panel disabled, after I enabled the panel the javascript doe not work when I check the radio button so that the chk2 became disabled.
$(document).ready(function (){
$('input[id^=rbtn]').click(function () {
SetControlEnableState($('#chk2'), $('#rbtn'));
});
function SetControlEnableState(controlToSet, control) {
if (control.is(':checked')) {
$(controlToSet).attr('disabled', 'disabled');
alert('if');
}
else {
$(controlToSet).removeAttr('disabled');
alert('else');
}
}
});
When the panel is updated the javascript code is not available anymore.

Don't use the click event on checkboxes but the change one :
$('input[id^=rbtn]').change(function () {
This way you'll get the new state. The click event is generated before the checkbox is changed.

Instead of this:
$(controlToSet).attr('disabled', 'disabled');
$(controlToSet).removeAttr('disabled');
Do this:
$(controlToSet).prop('disabled', true);
$(controlToSet).prop('disabled', false);

$(document).ready(function (){
$('input[id^=rbtn]').change(function () {
SetControlEnableState();
});
function SetControlEnableState() {
if ($('#rbtn').is(':checked')) {
$('#chk2').attr('disabled', 'disabled');
alert('if');
}
else {
$('#chk2').removeAttr('disabled');
alert('else');
}
}

Simplify the whole thing:
$(document).ready(function () {
$('input[id^=rbtn]').change(function () {
SetControlEnableState($('#chk2'), $('#rbtn'));
});
function SetControlEnableState(controlToSet, control) {
controlToSet.prop('disabled', control.is(':checked'));
}
});

try this
$(document).ready(function (){
$('input[id^=rbtn]').click(function () {
SetControlEnableState($('#chk2'), $(this));
});
function SetControlEnableState(controlToSet, control) {
if (control.is(':checked')) {
$(controlToSet).attr('disabled', 'disabled');
} else {
$(controlToSet).removeAttr('disabled');
}
}
});