all checkboxes need to be checked and unchecked with the main checkbox - javascript

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.

Related

Checkbox to control radio buttons

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

Make div appear (or disappear) on checkbox status

I have this jQuery code:
$(document).ready(function(){
$('.checkdisplay').change(function(){
if(this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
This works great only if I check the .checkdisplay radio button: the div appears, but after, if i uncheck .checkdisplay radio button, the div .todisplay doesn't disappear.
Where i'm wrong? :(
EDIT:
demo: http://jsfiddle.net/Mse2L/
You need to test all the radios and only show on the one with the correct class
You could have used ID too
Notice I use .on("click" since change needs a blur in some browsers
Live Demo
$(function(){
$("input[name='roomdoor']").on("click",function(){
if ($(this).hasClass("checkdisplay") && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
$(document).ready(function () {
$('.radio').change(function () {
if ($(this).hasClass('checkdisplay') && this.checked) $('.todisplay').fadeIn('slow');
else $('.todisplay').fadeOut('slow');
});
});
Demo
The problem is, you can't uncheck a radiobutton.
Problem is your radio button, you should use checkbox like,
Once a radio button having class checkdisplay is checked then it will be checked, how it can be unchecked
<input type='checkbox' class='checkdisplay' />
<div class='todisplay'>test</div>
Demo
Updated, try this like,
$(document).ready(function(){
$('.radio').change(function(){// add onchange on radio class
// check the radio has checkdisplay class or not
if($(this).hasClass('checkdisplay') && this.checked)
$('.todisplay').fadeIn('slow');
else
$('.todisplay').fadeOut('slow');
});
});
Working demo
$('.checkdisplay').click(function() {
if( $(this).is(':checked')) {
$(".todisplay").fadeIn('slow');
} else {
$(".todisplay").fadeOut('slow');
}
});

Clearing/Un-selecting Radio button on second click

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

Check/Uncheck all checkboxes

I've seen many check/uncheck all checkboxes scripts. But far most does not respect that if I toggled all checkboxes using the "checked all"-checkbox and then uncheck a single one in the list, the "checked all" checkbox is still checked.
Is there an elegant way of handling this case?
$('#checkAll').click(function() {
if(this.checked) {
$('input:checkbox').attr('checked', true);
}
else {
$('input:checkbox').removeAttr('checked');
}
});
$('input:checkbox:not(#checkAll)').click(function() {
if(!this.checked) {
$('#checkAll').removeAttr('checked');
}
else {
var numChecked = $('input:checkbox:checked:not(#checkAll)').length;
var numTotal = $('input:checkbox:not(#checkAll)').length;
if(numTotal == numChecked) {
$('#checkAll').attr('checked', true);
}
}
});
Demo: http://jsfiddle.net/ThiefMaster/HuM4Q/
As pointed out in the question's comment, a regular checkbox is not perfect for this. My implementation disables the "check all" box as soon as one checkbox is unchecked. So, to uncheck all still-checked checkboxes you'll have to click twice (first to re-check the unchecked ones and then to uncheck all other ones).
However, with a tri-state checkbox this might still be necessary as the state order might be unchecked->indefinite->checked->unchecked, so you'd need two clicks to come from indefinite to unchecked.
Since you probably don't want to check ALL checkboxes on your page with "Check All", replace input:checkbox with e.g. .autoCheckBox or input.autoCheckBox:checkbox and give those checkboxes class="autoCheckBox".
If you want all checkboxes inside a certain form, simple use #idOfYourForm input:checkbox or form[name=nameOfYourForm] input:checkbox
You can achieve this by attaching a click handler to each of the target checkboxes, and have that handler un-check the "control" checkbox based on the collective state of those target checkboxes. So, something like this:
// Control checks/unchecks targets
$('#controlcheckbox').click( function(){
$('.targetcheckboxes').attr('checked', this.checked );
});
// Targets affect control
$('.targetcheckboxes').click( function(){
if( $('.targetcheckboxes:not(:checked)').length ){
$('#controlcheckbox').attr('checked',false);
}
});
Even better -- you could attach this logic to an enclosing container element, and watch for the event using .delegate():
$('#some_container').delegate('.targetcheckboxes','click',function(){...} );
$("#selectall").click(function(){
var checked = $("#selectall").attr("checked");
$(".selectone").attr("checked",checked);
});
For setting select all
$(".selectone").click(function(){
var net = $(".selectone").map(function(){ return jQuery(this).attr("checked");}).get();
var flg = true;
if(jQuery.inArray(false, net)){
flg= false;
}
$("#selectall").attr("checked",flg);
});
Perhaps something like this:
$('tbody input:checkbox').change(function(){
if ($(this).closest('tbody').find('input:checkbox').not(':checked').length) {
$('#checkAll')[0].checked = false;
}
});
This assumes that #checkAll is in the thead section of your table.

jquery array checkbox

var others = $("#6");
others.click(function() {
$('input:checkbox').attr('checked',false);
$("#6").attr('checked',true);
});
I have an array of check boxes which is drawn from database. I want to uncheck other check boxes when a certain check box is ticked in my case checkbox with id #6, and it uncheck a checkbox #6 if other checkbox is check.
The code above is able to uncheck other checkbox but how can I uncheck the checkbox with id 6,once the other checkbox is check.
$('input:checkbox').click(function() {
if(this.id == '6' && this.checked)
$('input:checkbox:not(#6)').attr('checked', false);
else
$('#6').attr('checked', false);
});

Categories