Develop Reference

set variable if any checbox is checked

I have set of checkboxes let's say 5. I want to set some variable on change to true if any checkbox is checked and if none variable shoudl stay falsy. What I wrote is similar but it changes variable all the time so I can check 3 checkboxes then uncheck 1 and variable will be falsy even tho there are checked checkboxes. I found some solutions but most of them run with one checkbox or use Jquery
let button;
let check_this = document.querySelectorAll('.check_this')
Array.from(check_this).forEach(function(checbox){
checbox.addEventListener("change", function(){
if(checbox.checked){
button = true
}else{
button = false
}
});
});
<input class="check_this" type="checkbox" value="1">
<input class="check_this" type="checkbox" value="2">
<input class="check_this" type="checkbox" value="3">
<input class="check_this" type="checkbox" value="4">
<input class="check_this" type="checkbox" value="5">

Use some() to check if at least one element has .checked
const onCheckboxChange = (event) => {
let atLeastOneChecked = elements.some(e => e.checked);
console.log('atLeastOneChecked:', atLeastOneChecked);
};
const elements = Array.from(document.querySelectorAll('.check_this'));
elements.forEach(e => e.addEventListener('change', onCheckboxChange));
<input class="check_this" type="checkbox" value="1">
<input class="check_this" type="checkbox" value="2">
<input class="check_this" type="checkbox" value="3">
<input class="check_this" type="checkbox" value="4">
<input class="check_this" type="checkbox" value="5" checked>

How do I Select All Checkboxes When First Radio Input Selected & Uncheck All Checkboxes when Second radio input selected? (Javascript)

how do I select all checkboxes when the first radio input is selected & uncheck all checkboxes when the second radio input is selected? (Javascript)?
I've looked into previous similar questions on here, but they all seem to be about using checkboxes rather than radio buttons, or there aren't ways to unselect.
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3

Get a list of HTML nodes by class using document.querySelectorAll(). Iterate the radios list using NodeList.forEach(), and add a change event listener to each radio button. Whenever the listener is called, iterate the checkboxes array with NodeList.forEach(), and update the checked value of each element:
var checkboxes = document.querySelectorAll('.custom-selector');
var radios = document.querySelectorAll('.permission');
radios.forEach(function(el) {
el.addEventListener('change', function(e) {
var checked = el.value === 'select';
checkboxes.forEach(function(el) {
el.checked = checked;
});
});
});
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3

You can do it using JQuery.
$('.permission').click(function() {
$('.custom-selector').prop('checked', $(this).val() == 'select');
});
See below Code Snippet
$('.permission').click(function() {
$('.custom-selector').prop('checked', $(this).val() == 'select');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3

function handleChange(e) {
if (e.target.value == "select") {
handleCheckUncheck(true);
}
if (e.target.value == "deselect") {
handleCheckUncheck(false);
}
}
function handleCheckUncheck(value) {
document.querySelectorAll("input[type='checkbox']").forEach(function(val) {
val.checked = value;
})
}
document.querySelectorAll("input[type='radio']").forEach(function(val) {
val.addEventListener("change", handleChange);
})
<input type="radio" class="permission" name="permission" value="select" /> Select All<br>
<input type="radio" class="permission" name="permission" value="deselect" /> Deselect All<br>
<input type="checkbox" class="custom-selector" /> Checkbox 1
<input type="checkbox" class="custom-selector" /> Checkbox 2
<input type="checkbox" class="custom-selector" /> Checkbox 3

You can do it in a simple way without using jQuery.
Add a checkbox whose status will be set for others.
<label><input type="checkbox" onClick="toggle(this)" /> Select All</label>`
And use this javascript function that will check other checkboxes with the 'custom-selector' class:
function toggle(source) {
checkboxes = document.getElementsByName('custom-selector[]');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}
If someone checks the "Select All" checkbox, all others will also be selected. If it deselects, the effect will be the same.
Regards!

I agree with #OriDrori's answer, You don't need to load jQuery to do such a simple task.

How to unable and uncheck other checkbox if one is check using jquery?

<input type="checkbox" class="allCheck" />all
<input type="checkbox" class="checks" />shoes
<input type="checkbox" class="checks" />bag
<input type="checkbox" class="checks" />car
how to unable and uncheck other checkbox if checkbox all is checked?
NOTE: I want to check multiple checkbox EXCEPT ALL if ALL is checked the others must be unchecked and disabled.

It's fairly straight-forward, but there are gotchas:
If .allCheck is changed by the user, drive the .checks checkboxes from it
If a .checks checkbox is changed by the user, drive the .allCheck checkbox based on whether all or none of .checks are (now) checked
// If `.allCheck` is changed by the user, drive the `.checks` checkboxes from it
$(".allCheck").on("change", function() {
$(".checks").prop("checked", this.checked);
});
// If a `.checks` checkbox is changed by the user, drive the `.allCheck`
// checkbox based on whether all or none of `.checks` are (now) checked
$(".checks").on("change", function() {
var all = $(".checks").get().every(function(cb) {
return cb.checked;
});
$(".allCheck").prop("checked", all);
});
<label><input type="checkbox" class="allCheck" />all</label>
<label><input type="checkbox" class="checks" />shoes</label>
<label><input type="checkbox" class="checks" />bag</label>
<label><input type="checkbox" class="checks" />car</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Note in the above I have not done this
...and disabled
We can, but it's not the way these things are usually most useful. Instead, the above makes it easy to pick all but one (by ticking "all," then unticking the one).
But if you really want that disabled behavior, granted it's a bit simpler: You flag disabled via .prop("disabled", flag) and only have to handle changes to .allCheck.
$(".allCheck").on("change", function() {
$(".checks")
.prop("checked", this.checked)
.prop("disabled", this.checked)
});
<label><input type="checkbox" class="allCheck" />all</label>
<label><input type="checkbox" class="checks" />shoes</label>
<label><input type="checkbox" class="checks" />bag</label>
<label><input type="checkbox" class="checks" />car</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

$('.allCheck').click(function(){
$('.checks').prop('checked',$(this).prop('checked'));
$('.checks').prop('disabled',$(this).prop('checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="allCheck" />all
<input type="checkbox" class="checks" />shoes
<input type="checkbox" class="checks" />bag
<input type="checkbox" class="checks" />car

jQuery selector for dynamic input name

I have a set of checkboxes that have a name like
form[check][..]
where .. is a number (id). I would have another checkbox that checked would check all the previous checkboxes, a sort of check/uncheck all. The problem is, how can with jQuery get all that checkboxes?
EDIT 1
this is my current html markup:
<input type="checkbox" value="1" name="form[check][1]" />
<input type="checkbox" value="1" name="form[check][2]" />
<input type="checkbox" value="1" name="form[check][3]" />
<input type="checkbox" value="1" name="form[check][..]" />
<input type="checkbox" name="checkAll" />

Add a class to the checkboxes you want checked, and select them using that class
$('.myCheckbox').prop('checked', true);

$('[name="checkAll"]').on('change', function(){
$('input[name^="form[check]"]:checkbox').prop('checked', $(this).prop('checked'));
});​

How can I make a group of checkboxes mutually exclusive?

I have to make mutually exculsive checkboxes. I have come across numerous examples that do it giving example of one checkbox group.
One example is at http://blog.schuager.com/2008/09/mutually-exclusive-checkboxes-with.html.
In my case, I have many checkbox groups on the same page, so I want it to work like this example.
An asp.net codebehind example is here, but I want to do it in client side code.
How can I do this in JavaScript?
i have decided to use the ajax mutually exclusive checkbox extender.
The solutions given so far are basically based on radio buttons.
This link really helped me..http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-mutuallyexclusive-checkbox-extender

Using Mutual Checkboxes when there is Radio button is a bad idea but still you can do this as follows
HTML
<div>
Red: <input id="chkRed" name="chkRed" type="checkbox" value="red" class="checkbox">
Blue: <input id="chkBlue" name="chkBlue" type="checkbox" value="blue" class="checkbox">
Green: <input id="chkGreen" name="chkGreen" type="checkbox" value="green" class="checkbox">
</div>
<div>
Mango: <input id="chkRed" name="chkMango" type="checkbox" value="Mango" class="checkbox">
Orange: <input id="chkBlue" name="chkOrange" type="checkbox" value="Orange" class="checkbox">
Banana: <input id="chkGreen" name="chkBanana" type="checkbox" value="Banana" class="checkbox">
</div>
Jquery
$('div .checkbox').click(function () {
checkedState = $(this).attr('checked');
$(this).parent('div').children('.checkbox:checked').each(function () {
$(this).attr('checked', false);
});
$(this).attr('checked', checkedState);
});
And here is fiddle

Like I said in my comment, you should really use <radio> elements for this. Give them the same name and they work almost the same way:
<label><input type="radio" name="option" value="Option 1">Option 1</label>
<label><input type="radio" name="option" value="Option 2">Option 2</label>
The only significant difference is that, once one of them is selected, at least one of them has to be on (ie, you can't uncheck them again).
If you really feel the need to do it with check boxes, remind yourself that users with JavaScript disabled will be able to select all the options if they like. If you still feel the need to do it, then you'll need to give each checkbox group a unique class name. Then, handle the change event of each checkbox element and uncheck all the other elements matching the same class name as the clicked element.

I hope this one will work
HTML
A <input type="checkbox" class="alpha" value="A" /> |
B <input type="checkbox" class="alpha" value="B" /> |
C <input type="checkbox" class="alpha" value="C" />
<br />
1 <input type="checkbox" class="num" value="1" /> |
2 <input type="checkbox" class="num" value="2" /> |
3 <input type="checkbox" class="num" value="3" />
JavaScript
// include jQuery library
var enforeMutualExcludedCheckBox = function(group){
return function() {
var isChecked= $(this).prop("checked");
$(group).prop("checked", false);
$(this).prop("checked", isChecked);
}
};
$(".alpha").click(enforeMutualExcludedCheckBox(".alpha"));
$(".num").click(enforeMutualExcludedCheckBox(".num"));
well, radio button should be the one to be used in mutually excluded options, though I've encountered a scenario where the client preferred to have zero to one selected item, and the javaScript'ed checkbox works well.
Update
Looking at my answer, I realized it's redundant to refer to the css class twice. I updated my code to convert it into a jquery plugin, and created two solutions, depending on ones preference
Get all checkboxes whose check is mutually excluded
$.fn.mutuallyExcludedCheckBoxes = function(){
var $checkboxes = this; // refers to selected checkboxes
$checkboxes.click(function() {
var $this = $(this),
isChecked = $this.prop("checked");
$checkboxes.prop("checked", false);
$this.prop("checked", isChecked);
});
};
// more elegant, just invoke the plugin
$("[name=alpha]").mutuallyExcludedCheckBoxes();
$("[name=num]").mutuallyExcludedCheckBoxes();
HTML
A <input type="checkbox" name="alpha" value="A" /> |
B <input type="checkbox" name="alpha" value="B" /> |
C <input type="checkbox" name="alpha" value="C" />
<br />
1 <input type="checkbox" name="num" value="1" /> |
2 <input type="checkbox" name="num" value="2" /> |
3 <input type="checkbox" name="num" value="3" />
sample code
Group all mutually excluded checkboxes in a containing element
JavaScript
$.fn.mutuallyExcludedCheckBoxes = function(){
var $checkboxes = this.find("input[type=checkbox]");
$checkboxes.click(function() {
var $this = $(this),
isChecked = $this.prop("checked");
$checkboxes.prop("checked", false);
$this.prop("checked", isChecked);
});
};
// select the containing element, then trigger the plugin
// to set all checkboxes in the containing element mutually
// excluded
$(".alpha").mutuallyExcludedCheckBoxes();
$(".num").mutuallyExcludedCheckBoxes();
HTML
<div class="alpha">
A <input type="checkbox" value="A" /> |
B <input type="checkbox" value="B" /> |
C <input type="checkbox" value="C" />
</div>
<div class="num">
1 <input type="checkbox" value="1" /> |
2 <input type="checkbox" value="2" /> |
3 <input type="checkbox" value="3" />
</div>
sample code
Enjoy :-)

Try this:
HTML
<div>
Car: <input id="chkVehicleCar" name="chkVehicle" type="checkbox" value="Car" class="radiocheckbox">
Moto: <input id="chkVehicleMoto" name="chkVehicle" type="checkbox" value="Moto" class="radiocheckbox">
Byke: <input id="chkVehicleByke" name="chkVehicle" type="checkbox" value="Byke" class="radiocheckbox">
Feet: <input id="chkVehicleFeet" name="chkVehicle" type="checkbox" value="Feet">
</div>
<span>
Red: <input id="chkColorRed" name="chkColor" type="checkbox" value="Red" class="radiocheckbox">
Blue: <input id="chkColorBlue" name="chkColor" type="checkbox" value="Blue" class="radiocheckbox">
Green: <input id="chkColorGreen" name="chkColor" type="checkbox" value="Green" class="radiocheckbox">
Mango: <input id="chkFruitMango" name="chkFruit" type="checkbox" value="Mango" class="radiocheckbox">
Orange: <input id="chkFruitOrange" name="chkFruit" type="checkbox" value="Orange" class="radiocheckbox">
Banana: <input id="chkFruitBanana" name="chkFruit" type="checkbox" value="Banana" class="radiocheckbox">
</span>
​JavaScript/jQuery
$(':checkbox.radiocheckbox').click(function() {
this.checked
&& $(this).siblings('input[name="' + this.name + '"]:checked.' + this.className)
.prop('checked', false);
});​
Mutually exclusive checkboxes are grouped by container+name+classname.
You can use different groups in same container and also mix exclusive with non-exclusive checkbox with same name.
JavaScript code is highly optimized. You can see a working example.

No matter where the check box is located on your page, you just need to specify the group and here you go!
<input type='checkbox' data-group='orderState'> pending
<input type='checkbox' data-group='orderState'> solved
<input type='checkbox' data-group='orderState'> timed out
<input type='checkbox' data-group='sex'> male
<input type='checkbox' data-group='sex'> female
<input type='checkbox'> Isolated
<script>
$(document).ready(function () {
$('input[type=checkbox]').click(function () {
var state = $(this)[0].checked,
g = $(this).data('group');
$(this).siblings()
.each(function () {
$(this)[0].checked = g==$(this).data('group')&&state ? false : $(this)[0].checked;
});
});
})</script>

I guess this is what you want.
Consider the HTML below:
<form action="">
My favourite colors are:<br />
<br />
<input type="checkbox" value="red" name="color" /> Red<br />
<input type="checkbox" value="yellow" name="color" /> Yellow<br />
<input type="checkbox" value="blue" name="color" /> Blue<br />
<input type="checkbox" value="orange" name="color1" /> Orange<br />
<input type="checkbox" value="green" name="color1" /> Green<br />
<input type="checkbox" value="purple" name="color1" /> Purple
</form>
Note that there's two names for color groups: red, yellow, blue and orage, green, purple
And this JavaScript noted below will work generically to all checkbox on the page.
jQuery("input[type=checkbox]").unbind("click");
jQuery("input[type=checkbox]").each(function(index, value) {
var checkbox = jQuery(value);
checkbox.bind("click", function () {
var check = checkbox.attr("checked");
jQuery("input[name=" + checkbox.attr('name') + "]").prop("checked", false);
checkbox.attr("checked", check);
});
});
Take a look at this LIVE example