I have a checkbox and 3 radio buttons, I'm trying to have one of the radio buttons selected if the checkbox is checked and have any of them un-selected if the checkbox is unchecked.
My solution works on the first run, but wont select the radio button after the first click.
$('#checkbox-h-2g').click(function () {
if ($('#checkbox-h-2g').is(":checked")) {
$('#r1').attr('checked', true);
}if (!$('#checkbox-h-2g').is(":checked")) {
$('#r1 , #r2, #r3').attr('checked', false);
}
});
Use .prop() instead of .attr() to set properties, Also your code can be improved as
$('#checkbox-h-2g').change(function () {
if (this.checked) {
$('#r1').prop('checked', true);
}else{
$('#r1 , #r2, #r3').prop('checked', false);
}
});
Related
How would I stop a click event from a label associated to a checkbox if the checkbox is indeterminate?
I have attempted the following, but to no avail:
el.parent().find('.arena-custom-label').click(function ( event ) {
if (el.is(':indeterminate')) {
event.preventDefault();
el.attr('indeterminate', false);
el.removeClass('indeterminate');
dataGrid.find('.ag.gr:checked').trigger('click');
} else {
el.change(function () {
if (el.is(':checked')) {
dataGrid.find('tbody .ag.gr:not(:checked)').trigger('click');
} else {
dataGrid.find('tbody .ag.gr:checked').trigger('click');
}
});
}
});
el being the checkbox itself.
The goal is while this check box is indeterminate, upon the associated label click all I want it to do is go out of indeterminate and to unchecked. Then I will trigger all checked checkboxes in a table to go unchecked as well.
The problem is that when I click the indeterminate checkbox label, it causes it to go checked resulting in all unchecked checkboxes to go checked. The opposite of what I want.
indeterminate is a prop, not an attribute so you should use jquery.prop to update:
el.parent().find('.arena-custom-label').click(function ( event ) {
if (el.is(':indeterminate')) {
event.preventDefault();
el.prop('indeterminate', false);
el.removeClass('indeterminate');
dataGrid.find('.ag.gr:checked').trigger('click');
} else {
el.change(function () {
if (el.is(':checked')) {
dataGrid.find('tbody .ag.gr:not(:checked)').trigger('click');
} else {
dataGrid.find('tbody .ag.gr:checked').trigger('click');
}
});
}
});
See here and here for explanations.
Here is a fiddle with a vanilla JS demo.
I want to create a form in which if a radio button is selected, some checkboxes associated with it open up and the user must select at least one of the checkboxes under that radio button before submitting the form. For example refer to the codepen : https://codepen.io/anon/pen/zJKPRK. This is based on a dogs/cats tutorial I saw.
Here, item propagation is used to make all child items required:
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
},
};
FormStuff.init();
Here at least 1 radio button needs to be selected and if ClassB or ClassC is selected, I want that the user should select at least one checkbox under that particular class. Any suggestions?
.length gives you the count of elements in your selection. $('input[type="checkbox"]').is(':checked').length > 0 tells you whether or not at least 1 Checkbox has been checked. Just add classes to your selector as desired.
I have a LOT of radio buttons on a form I'm creating.
The reason why I am using radio buttons and not check box's is because I only want to let a user select one or none.
The bad thing about a radio button though is, once selected, it can't be undone. I am trying to add the feature of clearing a group of radio box's when it's clicked for the second time.
My method that I am implementing now works if I have a group of radio buttons I want to target individually but not if I want to implement it for ALL radio button groups on the page.
When I use multiple radio button groups, it will randomly un-select a radio button when I try to select a different option.
If anyone could help me out, it would be greatly appreciated.
JSFIDDLE for only one group of radio buttons (works)
If you change to this code instead and target an individual name, it works.
$('input[name="rad"]').click(function()
JSFIDDLE for multiple groups of radio buttons (doesn't work)
I am trying to be able to target all my radio button groups at once, because there are a LOT.
$(function(){
$('input[type="radio"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[name="rad"]').data('waschecked', false);
});
});
So you just need a way to check/uncheck reliably by name groups.
Something like this should work:
$('input[type="radio"]').on('click change', function () {//on click/change
$(this).prop('checked')//if checked
? $(this).prop('checked',false).data('waschecked', false)//uncheck
: $(this).prop('checked',true).data('waschecked', true)//else check
.siblings('input[name="'+$(this).prop('name')+'"]').data('waschecked', false);//make siblings false
});
kept the .data('waschecked', ...) in case you needed to have that value, but it works without it like this:
$('input[type="radio"]').on('click change', function () {//on click/change
$(this).prop('checked')//if checked
? $(this).prop('checked',false)//uncheck
: $(this).prop('checked',true);//else check
});
made a fiddle: http://jsfiddle.net/filever10/ZUb65/
Try changing the line to use the name attribute of the clicked radio in the selector expression
$radio.siblings('input[name='+ $(this).attr('name') +']').data('waschecked', false);
You just need to clear your "waschecked" flag on the other radios of the same group.
http://jsfiddle.net/jammykam/BtLxY/15/
And just in case you do need to target using onchange: http://jsfiddle.net/jammykam/BtLxY/27/
$('input[type="radio"]').on('change', function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[name='+ $(this).attr('name') +']').data('waschecked', false);
});
If you are using a simple primary to secondary relationship then try this out:
$('input[type="radio"][name="main_radios"]').on('change', function(){
$('input[type="radio"][name="secondary_radios"]').prop('checked', false);
$('input[type="radio"][name="third_radios"]').prop('checked', false);
$('input[type="radio"][name="fourth_radios"]').prop('checked', false);
// combine it all into one call if you really feel like it
$('input[type="radio"][name="secondary_radios"], input[type="radio"][name="third_radios"], input[type="radio"][name="fourth_radios"]').prop('checked', false);
});
Uncheck all radios that are not "this" name
// Listen for ANY radio to be changed
$('input[type="radio"]').on('change', function(){
// remember name of selected radio
var checked_name = $(this).attr('name');
// target only radios that are not "this" name and uncheck them
$('input[type="radio"]').filter(function(){
if($(this).attr('name') != checked_name){
return true;
}
else{
return false;
}
}).prop('checked', false);
});
I have a list of checkbox and want to select the only one check box and add the class for the checkbox input and select another checkbox remove that class from the existing checkbox
$('input.myclass').click(function ()
{
var id = $(this).attr('id').replace('image-','');
$('input.myclass:checked').not(this).removeAttr('checked');
var sFilter = "";
$('input.myclass[type=checkbox]').each(function () {
sFilter = sFilter + (this.checked ? $(this).val() : "");
});
check();
});
function check(){
var a = $('input:checkbox[name=cover_image]:checked').val();
alert(a);
}
I want to select only one checkbox and class for the checked checkbox if that checkbox not checked then remove the class for that
If you really want to use checkboxes(and not radio buttons) for some reason, do something like this:
$('input:checkbox').on('click', function () {
$('input.selected').removeClass('selected').prop('checked', false);
$('input:checked').addClass('selected');
});
Edit: Removing the attribute works, but property manipulation is a slighty better way of doing it(as suggested by RobG)
For your purpose first remove classes from all checkbox and unchecked them and then add class to clicked checkbox and checked it as below
$("input[type='checkbox']").on('click', function () {
$("input[type='checkbox']").removeClass('selected').attr('checked', false);
$(this).addClass('selected').attr('checked', true);
});
Check this Fiddle for your question
you may use on() to listen the changes on group of checkboxes.
var $checkBoxes = $(":checkbox").on("change", function () { // Here listening the changes on checkbox using on()
$checkBoxes.removeClass("change").attr("checked", false); // remove the class from existing Checkbox
$(this).addClass("change").attr("checked", true); // adding the class for the currenly checked checkbox
});
working FIDDLE is here
Can anyone help me with this?
I have two divs. In one div, I have a checkbox named allcheck, and in the other other div, I have checkboxes with name outcheck. If I check multiple, all need to be checked, and if I uncheck multiple, all should be unchecked. input radio is class of allcheck.
$('.inputradio').click(function(){
$("INPUT[name='outCheck']").each(function () {
if (allCheck.checkbox== true) {//multi check is checked
this.checked = true;
} else {
this.checked = false;
}
});
});
HTML
This is the div for main checkbox
<div id="actions"><div id="box">
<ul><li class="inputradio"><input name="allCheck" type="checkbox" ></li>
<li class="multiple">Multiple</li>
This is for child checkboxes:
<ul><li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
Even if one child is checked, if we check the main checkbox, all need to be selected. The code I posted is just inverting the check.
This code implements functionality to select and deselect all checkboxes
select and deselect
$(".select-all-checkbox").click(function () {
$('input:checkbox').prop('checked', this.checked);
});
If one item deselect then button CheckAll is UnCheck
$(".mainCheckboxClass")
.click(
function() {
if ($('input[class=mainCheckboxClass]:checked').length === $('input[class=mainCheckboxClass]').length)
$('.select-all-checkbox').prop("checked", true);
else
$('.select-all-checkbox').prop("checked", false);
});
Try this -
$('input[name=allCheck]').click(function(){
$("INPUT[name='outCheck']").prop('checked', this.checked);
});
This will toggle all checkboxes having name outCheck on click of allCheck.
See demo
UPDATE
see updated demo here
This works as expected. If all checkboxes are manually checked then main checkbox also changes and vice versa if one child is unchecked, main checkbox also gets unchecked.
Try this:
var $ch = $("input[name='outCheck']").change(function() {
$all.prop('checked', $ch.filter(':checked').length == $ch.length);
}),
$all = $('input[name=allCheck]').click(function () {
$ch.prop('checked', this.checked);
});
http://jsfiddle.net/wKgZV/1/
This will select and deselect main checkbox automatically depending on how many outcheck checkboxes are checked.