We Keep Coding

How can I disable all checkboxes on webpage at once?

I have several sets of checkboxes on a webpage. I want to uncheck them all with javascript. Right now, I do it by looking for the names of each set and unchecking them with FOR loops like this...
for (i=0;i<document.getElementsByName("myboxes").length;i++) {
document.getElementsByName("myboxes")[i].checked=false;}
for (i=0;i<document.getElementsByName("moreboxes").length;i++) {
document.getElementsByName("moreboxes")[i].checked=false;}
for (i=0;i<document.getElementsByName("evenmoreboxes").length;i++) {
document.getElementsByName("evenmoreboxes")[i].checked=false;}
I'm looking for a way to target them all with one loop. I could do getElementsByTagName('input') to target all INPUTS, but that's a problem because I have some radio inputs that I don't want to uncheck. Is there a way to target all checkbox inputs?
Thanks for the suggestions. I just thought of something. Each NAME I use has the word "boxes" in it, myboxes, moreboxes, evenmoreboxes. Is there a way to target the word "boxes" in in the name, like a wildcard, something like document.getElementsByName("*boxes") that way if I add a set of checkboxes at some point that I don't want to uncheck I can simply name them differently.

You can select all checked checkboxes and reset their state:
function uncheckAll() {
document.querySelectorAll('input[name$="boxes"]:checked')
.forEach(checkbox => checkbox.checked = false);
}
<input type="checkbox"/>
<input type="checkbox" name="a_boxes" checked/>
<input type="checkbox"/>
<input type="checkbox" name="b_boxes" checked/>
<input type="checkbox" name="c_boxes" checked/>
<button onclick="uncheckAll()">Reset</button>

you can use document.querySelectorAll('input[type="checkbox"]'); to get a list of them all. then run your loop

My proposal is:
document.querySelectorAll("[name=myboxes], [name=moreboxes], [name=evenmoreboxes]").forEach((e) => echecked=false);
document.querySelectorAll("[name=myboxes], [name=moreboxes], [name=evenmoreboxes]").forEach((e) => e.checked=false);
<input type="checkbox" name="myboxes" value="1" checked>1<br>
<input type="checkbox" name="moreboxes" value="2" checked>2<br>
<input type="checkbox" name="evenmoreboxes" value="3" checked>3<br>

As suggested by #imjared, you can use querySelectorAll, but you will have to iterate over it:
querySelectorAll('input[type="checkbox"]').forEach(c => c.checked = false);
Here is the doc for querySelectorAll

jquery value from checkbox in loop not posting

I have a checkbox with the same name and id but different value.
I trying to get the value when I click on the checkbox in order to pass it to a ajax request. What ever I try I get the same result it only returns the first value in the list (it is actually in a php loop)
function checkCheckboxState() {
if ($('.displayme').is(':checked')) {
//tried all of these...
//var id = $('.displayme').first().attr( "value" );
//var id = $('.displayme').val();
//var id = $(this).val();
alert(id);
}
var id = $(":checkbox[name='displayme']:checked").val();
}
<input type="checkbox" name="displayme" value="27" id="displayme" class="displayme" onclick="checkCheckboxState()">
<input type="checkbox" name="displayme" value="28" id="displayme" class="displayme" onclick="checkCheckboxState()">
<input type="checkbox" name="displayme" value="29" id="displayme" class="displayme" onclick="checkCheckboxState()">

You shouldn't have the same id used several times on the same page.
You can bind an event on the change of the checkbox and then get the value with this :
$("checkbox.displayme").on("change",function(){
var checker = $(this).is(':checked');
//your ajax code here
});
And if your checkbox are generated on a php loop, you can use the index of the loop to generate different id (but with the code above you don't need any id).

Your first problem is that you have multiple elements with the same id. They need to be unique. In this case you could even remove them as you have the common class names to identify the elements.
To solve your actual problem you need to get a reference to the clicked checkbox within the event handler. As you're already using jQuery, you could do that using the change event handler. Try this:
$(function() {
$('.displayme').change(function() {
if (this.checked)
console.log(this.value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="displayme" value="27" class="displayme">
<input type="checkbox" name="displayme" value="28" class="displayme">
<input type="checkbox" name="displayme" value="29" class="displayme">
Alternatively you can use map() to build an array of all the selected checkboxes which can then be passed in a single AJAX request:
$(function() {
$('.displayme').change(function() {
var values = $('.displayme:checked').map(function() {
return this.value;
}).get()
console.log(values);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="displayme" value="27" class="displayme">
<input type="checkbox" name="displayme" value="28" class="displayme">
<input type="checkbox" name="displayme" value="29" class="displayme">

get multiple checkbox checked value in c#

In my web form I am generating multiple checkboxes dynamically. hence they are not in the control. I am trying to get the value using Request.Form[name] but it is not correct
<input type="checkbox" name="Suppresision" value="Suppresision" />Suppresision
Now I have a add button which dynamically (using Javascript) add more similar checkbox. So within my table element now I have
<input type="checkbox" name="Suppresision" value="Suppresision" />Suppresision
<input type="checkbox" name="Suppresision" value="Suppresision" />Suppresision
<input type="checkbox" name="Suppresision" value="Suppresision" />Suppresision
How do I try to get the values of all three ? I am doing the same for textbox but when I use Request.Form[textbox name] I get a comma separated values of all of them. But for the checkbox I do Request.Form["Suppresision"] I only get one value that too Suppresision instead of checked or not checked.How do I get all three value even if it not checked

If you absolutely need to get a list of all the checkbox controls you have dynamically added you could assemble them into a hidden input when you submit the form.
You need to include a hidden input for each set of checkboxes you add with a name like name="[checkbox name]_allValues"
<input type="checkbox" name="Suppresision" value="Suppresision1" />Suppresision 1
<input type="checkbox" name="Suppresision" value="Suppresision2" />Suppresision 2
<input type="checkbox" name="Suppresision" value="Suppresision3"/>Suppresision 3
<input type='hidden' value='' name="Suppresision_allVals">
Then add in this jQuery to loop the checkbox groups and you will have access to the full list of values for each checkbox on the server.
$(document.forms[0]).submit(function(event){
$('input[type=checkbox]').each(function( index ) { //loop all checkboxes
$itm = $( this );
$allVals = $('input[name=' + $itm.attr('name') + '_allVals]').first();
if ($allVals.length) { //see if we have a hidden input
$allVals.val($allVals.val()
+ ($allVals.val().length > 0 ? ',' : ' ') //add delemiter
+ ($itm.is(':checked') ? $itm.val() : '')); //add value
}
});
});
This way you will have access to the full list in Request.Form["Suppresision_allVals"] with blank values for unchecked boxes similar to what you have for empty textbox controls now.

You have same name attribute value for the three checkboxes. You should have different to make sure they can be read separately from the request form's collection on the server side. Also, in case of checkboxes, it should be checked attribute. Hopefully this will put you the right direction.
<input type="checkbox" name="Suppresision1" checked="checked" />
<input type="checkbox" name="Suppresision2" checked="" />
<input type="checkbox" name="Suppresision3" checked="" />

<input type="checkbox" class="chkItems" name="Suppresision1" checked="checked" />
<input type="checkbox" class="chkItems" name="Suppresision2" checked="" />
<input type="checkbox" class="chkItems" name="Suppresision3" checked="" />
var chkValue = [];
$('.chkItems:checked').each(function(i, e) {
chkValue.push({
chkItem : $(this).val()
});
});

jQuery lookup from databound checklist

My MSCRM 2015 online solution uses a 3rd party tool to build a checkbox list from N:N dynamically and this is then published in another Iframe, I was wandering if I could use jQuery to test if any of these checkboxes are checked in JavaScript
Problem though if you look at the html these inputs don't have id's or names I can use to reference them with something like ...
var checkboxValues = [];
$('input[name=checboxset_ava_incident_ava_affectedcountry]:checked').map(function() {
checkboxValues.push($(this).val());
Here is an example of how the html get build:
hope the sizing is ok to read But what I want you to see is the <input> tag's properties:
<input type="checkbox" data-bind="id: Id, checked: Value, title: Name, enable: $parent.GetIsEnabled()">

If you want to find selected checkboxes, radio buttons or select elements, look at the jQuery :checked selector, as in
$(':checked')...
If you want checkboxes, use the type attribute in your selector, as in
$('input[type=checkbox]')...
or combine them, to find only checked checkboxes (i.e., to ensure that you don't pick up any radio buttons or select elements):
$('input[type=checkbox]:checked')...
DEMO
var findChecked = function() {
var checked_values = [];
var $checkedBoxes = $('input[type=checkbox]:checked');
console.log('$checkedBoxes', $checkedBoxes.length);
$checkedBoxes.each(function(i, e) {
checked_values.push($(e).val());
});
alert(checked_values);
};
$('button').click(findChecked);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" checked value="1" /> 1</label>
<label><input type="checkbox" value="2" /> 2</label>
<label><input type="checkbox" value="3" /> 3</label>
<button>See checked</button>

JavaScript: How to detect if an HTML checkbox was selected?

How do I:
detect if an HTML checkbox has be clicked/selected?
retrieve which checkbox(es) have been selected?
Example code:
<FORM ACTION="...">
<INPUT TYPE=CHECKBOX VALUE="1">1 bedroom<BR>
<INPUT TYPE=CHECKBOX VALUE="2">2 bedrooms<BR>
<INPUT TYPE=CHECKBOX VALUE="3">3 bedrooms<BR>
<INPUT TYPE=CHECKBOX VALUE="4+">4+ bedrooms<P>
</FORM>
Meaning,
if the web user selects "1 bedroom", I want an event to fire to inform me the user selected "1 bedroom".
As you can see, a user can select multiple checkboxes. For example, they might want to see homes that have either "1 bedroom" or "2 bedrooms". So they would selected both checkboxes. How do I retrieve the checkbox values when multiple checkboxes have been selected?
In case it helps, I would be open to using JQuery to simplify this.

jQuery to the rescue! (since you tagged it as such):
$('input:checkbox[name=bedrooms]').click(function() {
var values = $('input:checkbox[name=bedrooms]:checked').map(function() {
return this.value
}).get();
// do something with values array
})
(make sure to add a name="bedrooms" attribute in the html for your checkboxes; you'll need them when submitting the form anyway, in order to retrieve them on the server).
I've used a few pseudo-selectors:
"input:checkbox" finds all the input checkboxes on the page
"[name=bedrooms]" finds all the elements with attribute name="bedrooms"
":checked" finds all the elements with attribute checked=true
Combine them as "input:checkbox[name=bedrooms]:checked" and jQuery gives you all the checked checkboxes.
For each one I pluck out their value attribute into an array you can simply iterate over and do what you wish.
Edit
You can optimize this code to save a reference to your checkboxes instead of telling jQuery to go fetch them all everytime there's a click:
var $checkboxes = $('input:checkbox[name=bedrooms]');
$checkboxes.click(function() {
var values = $checkboxes
.filter(function() { return this.checked })
.map(function() { return this.value })
.get();
// do something with values array
})
In this sample I've saved the checkboxes into var $checkboxes. On click of any checkbox, instead of going back to the DOM to grab the checked ones, we simply filter $checkboxes down to only the checkboxes that are checked, and for each one pluck out the value attribute into an array. The get() is just an obscure requirement to convert the "jQueryized" array to a regular JavaScript Array.

1) Use the onclick attribute.
2) You could give them each the same name and use $('input[name=yourname]:checked') to get them all.
[Edit] as requested, here's an SSCCE.
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(init);
function init() {
// Add onclick function to every checkbox with name "bedrooms".
$('input[name=bedrooms]').click(showCheckedValues);
}
function showCheckedValues() {
// Gather all values of checked checkboxes with name "bedrooms".
var checked = $('input[name=bedrooms]:checked').map(function() {
return this.value;
}).get();
alert(checked);
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="bedrooms" value="1">1 bedroom<br>
<input type="checkbox" name="bedrooms" value="2">2 bedroom<br>
<input type="checkbox" name="bedrooms" value="3">3 bedroom<br>
<input type="checkbox" name="bedrooms" value="4+">4+ bedroom<br>
</form>
</body>
</html>

<form name="myForm">
<input type="checkbox" name="myCheck"
value="My Check Box"> Check Me
</form>
Am I Checked?
This is from a textbook called JavaScript in 10 Easy Steps or Less by Arman Danesh - so i'd assume this works. hope it helps

Assign names and/or IDs to your checkbox elements so that you can distinguish them in code. Then, using jQuery, add events with bind if you want to handle the check/uncheck state changes.

Use IDs on your checkbox.
<FORM ACTION="...">
<INPUT TYPE=CHECKBOX id="c1" VALUE="1">1 bedroom<BR>
<INPUT TYPE=CHECKBOX id="c2" VALUE="2">2 bedrooms<BR>
<INPUT TYPE=CHECKBOX id="c3" VALUE="3">3 bedrooms<BR>
<INPUT TYPE=CHECKBOX id="c4" VALUE="4+">4+ bedrooms<P>
</FORM>
$('c1').checked // returns whether the 1 bedroom checkbox is true or false

You can use the .checked property on a checkbox to retrieve whether a checkbox has been checked. To fire an event when a checkbox is checked, you can use the click event in jquery. Something like the below would work to list all checkboxes on the page that have been checked.
$("input[type='checkbox']").click(function() {
// if you want information about the specific checkbox that was clicked
alert("checkbox name : " + $(this).name + " | checked : " + $(this).checked);
// if you want to do something with ALL the checkboxes on click.
$.each($["input[type='checkbox']", function(i, checkEl) {
// put any of your code to do something with the checkboxes here.
alert("checkbox name : " + checkEl.name + " | checked : " + checkEl.checked);
});
});

You can use events to see if a checkbox was selected (onChange). You can read more about it at the Essential Javascript tutorial (see the section entitled: Javascript is an Event Driven Language)

Markup:
...<input type="checkbox">...
detect if an HTML checkbox has be clicked/selected?
a: using jQuery 1.7+:
$(function(){
$("input").click(function () {
console.log($(this)[0].checked);
});
});
retrieve which checkbox(es) have been selected?
a: again using jQuery 1.7+:
console.log($('input:checked'));
Hope this helps.

If you do not want to use JQuery you could always use
document.GetElementById("cbxCheckbox1");