How to make an active radio button unclickable - javascript

There is a radio input form with two options in a Javascript / html base page. How i can make un-clickable the option which is active or after activation?
<div class="unit_1">
<label><input checked name=unit onclick=Screen_Units(); type=radio value=SI>SI</label>
</div>
<div class="unit_2">
<label><input name=unit onclick=Screen_Units() type=radio value=Engl>Imperia</label>
</div>


Please try this .Replace with your radio buttons
$(document).ready(function() {
$(".check").click(function() {
$(".check").attr("disabled", true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" class="check" name="gender">
<input type="radio" class="check" name="gender">


If you want to use a complete javascript-free option you can go with CSS3 only:
input[type=radio]:checked {
position: relative;
pointer-events: none;
}
input[type=radio]:checked:before {
content:" ";
display:block;
position:absolute;
top:0;left:0;right:0;bottom:0;
z-index:10;
}
This will prevent the clicks on the active radio.
JSFiddle: https://jsfiddle.net/he31ob0t/


Try this :
function Screen_Units(){
//your rest of the code
document.getElementById("first").checked = true;
}
<div class="unit_1"><label><input id="first" checked readonly name=unit onclick="Screen_Units();" type=radio value=SI>SI</label></div>
<div class="unit_2"><label><input name=unit onclick=Screen_Units() type=radio value=Engl>Imperia</label></div>


How about hiding the other?
function Screen_Units(but) {
var buts = document.getElementsByName(but.name);
var val = but.value;
var div = (val == buts[0].value) ? upTo(buts[1],"div") : upTo(buts[0],"div");
div.style.display="none";
}
function upTo(el, tagName) {
tagName = tagName.toLowerCase();
while (el && el.parentNode) {
el = el.parentNode;
if (el.tagName && el.tagName.toLowerCase() == tagName) {
return el;
}
}
return null;
}
<div class="unit_1">
<label><input checked name="unit" onclick="Screen_Units(this);" type=radio value="SI">SI</label>
</div>
<div class="unit_2">
<label><input name="unit" onclick="Screen_Units(this)" type="radio" value="Engl">Imperia</label>
</div>


as #boldewyn mentioned in comments "using onchange instead of onclick" solved my problem.
<div class="unit_1">
<label><input checked name=unit onchange=Screen_Units(); type=radio value=SI>SI</label>
</div>
<div class="unit_2">
<label><input name=unit onchange=Screen_Units() type=radio value=Engl>Imperia</label>
</div>
thanks all


Try it :
With Pure javascript :
<html>
<head>
</head>
<body>
<div class="unit_1">
<label><input checked name="unit" onclick="Screen_Units(this)" type="radio" value="SI">SI</label>
</div>
<div class="unit_2">
<label><input name="unit" onclick="Screen_Units(this)" type="radio" value="Engl">Imperia</label>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var ele = document.getElementsByName("unit");
function Screen_Units(t){
for(var i=0; i<ele.length; i++) {
if(ele[i]!=t){
var x = ele[i];
while(x.parentNode.tagName != "DIV")
x = x.parentNode;
x.style.display = "none";
}
}
}
</script>
</body>
</html>


onclick="this.checked=false;"
will make it unclickable.

Related

How to check uncheck checkboxes inside nested gridview using javascript or jquery

Actually, I implemented half of the code like if one checkbox is checked then check all checkboxes under that checkbox.
But now I want to uncheck the main checkbox if I marked uncheck on other checkboxes too...
please help me appropriate with this...
my code:
<script type="text/javascript">
function SelectAllCheckboxesA(chk, chk1, chk2, chk3, chk4) {
document.getElementById(chk1).checked = document.getElementById(chk2).checked = document.getElementById(chk3).checked = document.getElementById(chk4).checked = document.getElementById(chk).checked;
if (document.getElementById(chk1).checked == false || document.getElementById(chk2).checked == false || document.getElementById(chk3).checked == false || document.getElementById(chk4).checked == false) document.getElementById(chk).checked = false;
}
</script>

If you assign a css class to the parent check box and and another class for all the children it will be easier.
<html>
<body>
<br><br>
<input type="checkbox" class="parent" name="vehicle" > Parent<br>
<br>
<input type="checkbox" class="child" name="vehicle"> child 1<br>
<input type="checkbox" class="child" name="vehicle"> child 2<br>
<input type="checkbox" class="child" name="vehicle"> child 3<br>
<script type="text/javascript">
var parentCheckBox = document.querySelector(".parent");
var childCheckBoxes = document.querySelectorAll(".child");
parentCheckBox.onclick = function(){
childCheckBoxes.forEach(function(child){
child.checked=parentCheckBox.checked;
});
}
childCheckBoxes.forEach(function(child){
child.onclick = function(){
var allchecked = true;
childCheckBoxes.forEach(function(childBox){
allchecked = allchecked? childBox.checked : allchecked;
});
parentCheckBox.checked = allchecked;
}
});
</script>
</body>
</html>
Here is the demo https://jsfiddle.net/m23txgdz/

HTML - Javascript on check

Okay first of all i have code like this
<input type="checkbox" class="css-checkbox" id="test1">
<input type="checkbox" class="css-checkbox" id="test2">
<input type="checkbox" class="css-checkbox" id="test3">
<input type="checkbox" class="css-checkbox" id="test4">
Now i modified it like this
<input type="checkbox" class="css-checkbox" id="test1" onclick="myFunction()">
<input type="checkbox" class="css-checkbox" id="test2" onclick="myFunction()">
<input type="checkbox" class="css-checkbox" id="test3" onclick="myFunction()">
<input type="checkbox" class="css-checkbox" id="test4" onclick="myFunction()">
And this is myfunction
function myFunction() {
var testArr = ["test1", "test2"];
for (var i = 0; i < testArr.length; i++) {
var checkBox = document.getElementById(testArr[i].value);
if (checkBox.checked == true){
Materialize.toast('I am a toast!', 4000)
}
}
}
What i am trying to do ?
I am trying to show a notice/Dialog that materialize.toast will show when checkbox with id test1 or test2 are checked. and doesn't do anything when test3 or test4 is selected. i hope anyone can help me with this.

I believe the below is what you are looking for.
First, add this as a parameter in the function used in the checkbox, that way you can trigger the clicked checkbox
And then in the function check if the clicked checkbox is checked, and have the special id, then do whatever you want
function myFunction(e) {
var testArr = ["test1", "test2"];
var chkId = $(e).attr("id");
if (e.checked == true && testArr.indexOf(chkId) !== -1) {
console.log("Materialize goes here!"); //Materialize.toast('I am a toast!', 4000)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="css-checkbox" id="test1" onclick="myFunction(this)">
<input type="checkbox" class="css-checkbox" id="test2" onclick="myFunction(this)">
<input type="checkbox" class="css-checkbox" id="test3" onclick="myFunction(this)">
<input type="checkbox" class="css-checkbox" id="test4" onclick="myFunction(this)">

You can try with the below code it will helps you.
function myFunction(id) {
var c = document.getElementById(id);
if((id=='test1' || id=='test2') && c.checked)
{
Materialize.toast('I am a toast!', 4000)
}
}

Issue with this line
var checkBox = document.getElementById(testArr[i].value);
It has to be
var checkBox = document.getElementById(testArr[i]).value;
Also to know if checkbox is checked, there is no need to get it's value
document.getElementById(testArr[i]).checked
will return state of checkbox

function myFunction() {
debugger;
var testArr = ["test1", "test2"];
for (var i = 0; i < testArr.length; i++) {
var checkBox = document.getElementById(testArr[i]);
if (checkBox.checked == true){
alert('I am a toast!');
}
}
}
removing value from document.getElementById(testArr[i]).value works for me
or you can directly check checkbox is checked or not using following function
function myFunction() {
debugger;
var testArr = ["test1", "test2"];
for (var i = 0; i < testArr.length; i++) {
var flag = document.getElementById(testArr[i]).checked;
if (flag){
alert('I am a toast!');
}
}
}

var checkBox = document.getElementById(testArr[i]);
This should solve your problem.

javascript change and send multiple checkbox values

H, I have 4 checkboxes that i need to set values when clicked and unclicked. I have code that works for the first one but struggling to make it work with the other 3?
The code is
<label><input type="checkbox" name="colorCheckbox" value="red"> Return journey required?</label>
<div align="left"> <label><input type="checkbox" name="signs" id="signs"> Non sign written</label></div>
<div align="left"> <label><input type="checkbox" name="disabled" id="disabled"> Disabled access</label></div>
<div align="left"> <label><input type="checkbox" name="female" id="female"> Female driver</label></div>
and the js that works for the first on is :
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
if (this.checked){
document.getElementById("return_required").value = "YES";
}
else {
document.getElementById("return_required").value = "NO";
}
});
});

Because they don't have a value like the first one. They have an id.
You are getting the input value and working on it, so if the input don't has a value, you won't be able to select it.
var inputValue = $(this).attr("value"); // Offending line, because only your first input has a value.
$("." + inputValue).toggle();

The easiest way would be to check the name of the clicked element using this.name and manually match it to the checkboxes, then code the logic for each checkbox. An example is provided below:
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
var inputValue = $(this).attr("value");
$("." + inputValue).toggle();
if (this.name == "colorCheckbox")
if (this.checked) {
document.getElementById("return_required").value = "YES";
} else {
document.getElementById("return_required").value = "NO";
}
else if (this.name == "signs") {
console.log("signs"); // replace with logic
} else if (this.name == "disabled") {
console.log("disabled"); // replace with logic
} else if (this.name == "female") {
console.log("female"); // repalce with logic
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" name="colorCheckbox" value="red"> Return journey required?</label>
<div align="left"> <label><input type="checkbox" name="signs" value="signs"> Non sign written</label></div>
<div align="left"> <label><input type="checkbox" name="disabled" value="disabled"> Disabled access</label></div>
<div align="left"> <label><input type="checkbox" name="female" value="female"> Female driver</label></div>
<br>
<input id="return_required" value="NO"></input>

How to only have one checkbox checked at a time?

I want to figure out how to only have one checkbox checked at a time, I wish to do it with a function, and without radios as that's not the style I am trying to go for.
My code is as follows :
function check(c01)
{
if((this).is(":checked") == true)
{
c02 = false;
}
}
<input type="checkbox" name="creditCheck" id="c01" value="Yes" onclick="check(c01);" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" onclick= "check(c02);" />No'

Here is an example without JQuery. Add a class to your inputs.When Clicked, uncheck everything, and then check the clicked input if it was not checked.
function check(input)
{
var checkboxes = document.getElementsByClassName("radioCheck");
for(var i = 0; i < checkboxes.length; i++)
{
//uncheck all
if(checkboxes[i].checked == true)
{
checkboxes[i].checked = false;
}
}
//set checked of clicked object
if(input.checked == true)
{
input.checked = false;
}
else
{
input.checked = true;
}
}
<input type="checkbox" class="radioCheck" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes
<input type="checkbox" class="radioCheck" name="creditCheck" id="c02" value="No" onclick= "check(this);" />No'

That what exactly radio buttons made for, if it's just about style use radio buttons with checkbox style, so you don't need to add extra js code, check the example below.
Hope this helps.
input[type="radio"] {
-webkit-appearance: checkbox; /* Chrome, Safari, Opera */
-moz-appearance: checkbox; /* Firefox */
-ms-appearance: checkbox; /* not currently supported */
}
<input type="radio" name="creditCheck" id="c01" value="Yes" checked/>Yes
<input type="radio" name="creditCheck" id="c02" value="No" />No

Just a working example, feel free to refine the solution:
$("#c01").click(function(){
if($("#c01").is(':checked'))
$("#c02").prop("checked", false);
});
$("#c02").click(function(){
if($("#c02").is(':checked'))
$("#c01").prop("checked", false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" />No

If I did understand it well:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<input type="checkbox" name="creditCheck" value="Yes" />Yes
<input type="checkbox" name="creditCheck" value="No" />No
<script type="text/javascript">
function getCheckboxes() {
return document.querySelectorAll('input[type=checkbox]');
}
function uncheckAllCheckboxes() {
var checkboxes = getCheckboxes();
for (var i = 0, length = checkboxes.length; i < length; i++) {
checkboxes[i].checked = false;
}
}
function manageClick() {
uncheckAllCheckboxes();
this.checked = true;
}
function init() {
var checkboxes = getCheckboxes();
for (var i = 0, length = checkboxes.length; i < length; i++) {
checkboxes[i].addEventListener('click', manageClick);
}
}
init();
</script>
</body>
</html>

For your very simple use case where there are just two checkboxes to toggle between, I would do it as follows:
function check(checkbox)
{
var uncheck = checkbox.id === 'c01' ? 'c02' : 'c01';
$('#' + uncheck).prop('checked', false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="creditCheck" id="c01" value="Yes" onclick="check(this);" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" onclick= "check(this);" />No

Here is another example on how you can do this:
$('input[name="creditCheck"]').on('click', function(e) {
$('input[name="creditCheck"]').prop('checked', false);
$(this).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="creditCheck" id="c01" value="Yes" />Yes
<input type="checkbox" name="creditCheck" id="c02" value="No" />No

How to implement "select all" check box in HTML?

I have an HTML page with multiple checkboxes.
I need one more checkbox by the name "select all". When I select this checkbox all checkboxes in the HTML page must be selected. How can I do this?

<script language="JavaScript">
function toggle(source) {
checkboxes = document.getElementsByName('foo');
for(var checkbox in checkboxes)
checkbox.checked = source.checked;
}
</script>
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
UPDATE:
The for each...in construct doesn't seem to work, at least in this case, in Safari 5 or Chrome 5. This code should work in all browsers:
function toggle(source) {
checkboxes = document.getElementsByName('foo');
for(var i=0, n=checkboxes.length;i<n;i++) {
checkboxes[i].checked = source.checked;
}
}

Using jQuery:
// Listen for click on toggle checkbox
$('#select-all').click(function(event) {
if(this.checked) {
// Iterate each checkbox
$(':checkbox').each(function() {
this.checked = true;
});
} else {
$(':checkbox').each(function() {
this.checked = false;
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox-1" id="checkbox-1" />
<input type="checkbox" name="checkbox-2" id="checkbox-2" />
<input type="checkbox" name="checkbox-3" id="checkbox-3" />
<!-- select all boxes -->
<input type="checkbox" name="select-all" id="select-all" />

I'm not sure anyone hasn't answered in this way (using jQuery):
$( '#container .toggle-button' ).click( function () {
$( '#container input[type="checkbox"]' ).prop('checked', this.checked)
})
It's clean, has no loops or if/else clauses and works as a charm.

I'm surprised no one mentioned document.querySelectorAll(). Pure JavaScript solution, works in IE9+.
function toggle(source) {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
}
}
<input type="checkbox" onclick="toggle(this);" />Check all?<br />
<input type="checkbox" />Bar 1<br />
<input type="checkbox" />Bar 2<br />
<input type="checkbox" />Bar 3<br />
<input type="checkbox" />Bar 4<br />

here's a different way less code
$(function () {
$('#select-all').click(function (event) {
var selected = this.checked;
// Iterate each checkbox
$(':checkbox').each(function () { this.checked = selected; });
});
});

Demo http://jsfiddle.net/H37cb/
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>
<script type="text/javascript">
$(document).ready(function(){
$('input[name="all"],input[name="title"]').bind('click', function(){
var status = $(this).is(':checked');
$('input[type="checkbox"]', $(this).parent('li')).attr('checked', status);
});
});
</script>
<div id="wrapper">
<li style="margin-top: 20px">
<input type="checkbox" name="all" id="all" /> <label for='all'>All</label>
<ul>
<li><input type="checkbox" name="title" id="title_1" /> <label for="title_1"><strong>Title 01</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_1" value="1" /> <label for="box_1">Sub Title 01</label></li>
<li><input type="checkbox" name="selected[]" id="box_2" value="2" /> <label for="box_2">Sub Title 02</label></li>
<li><input type="checkbox" name="selected[]" id="box_3" value="3" /> <label for="box_3">Sub Title 03</label></li>
<li><input type="checkbox" name="selected[]" id="box_4" value="4" /> <label for="box_4">Sub Title 04</label></li>
</ul>
</li>
</ul>
<ul>
<li><input type="checkbox" name="title" id="title_2" /> <label for="title_2"><strong>Title 02</strong></label>
<ul>
<li><input type="checkbox" name="selected[]" id="box_5" value="5" /> <label for="box_5">Sub Title 05</label></li>
<li><input type="checkbox" name="selected[]" id="box_6" value="6" /> <label for="box_6">Sub Title 06</label></li>
<li><input type="checkbox" name="selected[]" id="box_7" value="7" /> <label for="box_7">Sub Title 07</label></li>
</ul>
</li>
</ul>
</li>
</div>

When you call document.getElementsByName("name"), you will get a Object. Use .item(index) to traverse all items of a Object
HTML:
<input type="checkbox" onclick="for(c in document.getElementsByName('rfile')) document.getElementsByName('rfile').item(c).checked = this.checked">
<input type=​"checkbox" name=​"rfile" value=​"/​cgi-bin/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​includes/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​misc/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​modules/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​profiles/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​scripts/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​sites/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​stats/​">​
<input type=​"checkbox" name=​"rfile" value=​"/​themes/​">​

Slightly changed version which checks and unchecks respectfully
$('#select-all').click(function(event) {
var $that = $(this);
$(':checkbox').each(function() {
this.checked = $that.is(':checked');
});
});

My simple solution allows to selectively select/deselect all checkboxes in a given portion of the form, while using different names for each checkbox, so that they can be easily recognized after the form is POSTed.
Javascript:
function setAllCheckboxes(divId, sourceCheckbox) {
divElement = document.getElementById(divId);
inputElements = divElement.getElementsByTagName('input');
for (i = 0; i < inputElements.length; i++) {
if (inputElements[i].type != 'checkbox')
continue;
inputElements[i].checked = sourceCheckbox.checked;
}
}
HTML example:
<p><input onClick="setAllCheckboxes('actors', this);" type="checkbox" />All of them</p>
<div id="actors">
<p><input type="checkbox" name="kevin" />Spacey, Kevin</p>
<p><input type="checkbox" name="colin" />Firth, Colin</p>
<p><input type="checkbox" name="scarlett" />Johansson, Scarlett</p>
</div>
I hope you like it!

<html>
<head>
<script type="text/javascript">
function do_this(){
var checkboxes = document.getElementsByName('approve[]');
var button = document.getElementById('toggle');
if(button.value == 'select'){
for (var i in checkboxes){
checkboxes[i].checked = 'FALSE';
}
button.value = 'deselect'
}else{
for (var i in checkboxes){
checkboxes[i].checked = '';
}
button.value = 'select';
}
}
</script>
</head>
<body>
<input type="checkbox" name="approve[]" value="1" />
<input type="checkbox" name="approve[]" value="2" />
<input type="checkbox" name="approve[]" value="3" />
<input type="button" id="toggle" value="select" onClick="do_this()" />
</body>
</html>

Try this simple JQuery:
$('#select-all').click(function(event) {
if (this.checked) {
$(':checkbox').prop('checked', true);
} else {
$(':checkbox').prop('checked', false);
}
});

JavaScript is your best bet. The link below gives an example using buttons to de/select all. You could try to adapt it to use a check box, just use you 'select all' check box' onClick attribute.
Javascript Function to Check or Uncheck all Checkboxes
This page has a simpler example
http://www.htmlcodetutorial.com/forms/_INPUT_onClick.html

This sample works with native JavaScript where the checkbox variable name varies, i.e. not all "foo."
<!DOCTYPE html>
<html>
<body>
<p>Toggling checkboxes</p>
<script>
function getcheckboxes() {
var node_list = document.getElementsByTagName('input');
var checkboxes = [];
for (var i = 0; i < node_list.length; i++)
{
var node = node_list[i];
if (node.getAttribute('type') == 'checkbox')
{
checkboxes.push(node);
}
}
return checkboxes;
}
function toggle(source) {
checkboxes = getcheckboxes();
for (var i = 0 n = checkboxes.length; i < n; i++)
{
checkboxes[i].checked = source.checked;
}
}
</script>
<input type="checkbox" name="foo1" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo2" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo3" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo4" value="bar4"> Bar 4<br/>
<input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>
</body>
</html>

It's rather simple:
const selectAllCheckboxes = () => {
const checkboxes = document.querySelectorAll('input[type=checkbox]');
checkboxes.forEach((cb) => { cb.checked = true; });
}

If adopting the top answer for jQuery, remember that the object passed to the click function is an EventHandler, not the original checkbox object. Therefore code should be modified as follows.
HTML
<input type="checkbox" name="selectThemAll"/> Toggle All<br/>
<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
Javascript
$(function() {
jQuery("[name=selectThemAll]").click(function(source) {
checkboxes = jQuery("[name=foo]");
for(var i in checkboxes){
checkboxes[i].checked = source.target.checked;
}
});
})

<asp:CheckBox ID="CheckBox1" runat="server" Text="Select All" onclick="checkAll(this);" />
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem Value="Item 1">Item 1</asp:ListItem>
<asp:ListItem Value="Item 2">Item 2</asp:ListItem>
<asp:ListItem Value="Item 3">Item 3</asp:ListItem>
<asp:ListItem Value="Item 4">Item 4</asp:ListItem>
<asp:ListItem Value="Item 5">Item 5</asp:ListItem>
<asp:ListItem Value="Item 6">Item 6</asp:ListItem>
</asp:CheckBoxList>
<script type="text/javascript">
function checkAll(obj1) {
var checkboxCollection = document.getElementById('<%=CheckBoxList1.ClientID %>').getElementsByTagName('input');
for (var i = 0; i < checkboxCollection.length; i++) {
if (checkboxCollection[i].type.toString().toLowerCase() == "checkbox") {
checkboxCollection[i].checked = obj1.checked;
}
}
}
</script>

that should do the job done:
$(':checkbox').each(function() {
this.checked = true;
});

You may have different sets of checkboxes on the same form. Here is a solution that selects/unselects checkboxes by class name, using vanilla javascript function document.getElementsByClassName
The Select All button
<input type='checkbox' id='select_all_invoices' onclick="selectAll()"> Select All
Some of the checkboxes to select
<input type='checkbox' class='check_invoice' id='check_123' name='check_123' value='321' />
<input type='checkbox' class='check_invoice' id='check_456' name='check_456' value='852' />
The javascript
function selectAll() {
var blnChecked = document.getElementById("select_all_invoices").checked;
var check_invoices = document.getElementsByClassName("check_invoice");
var intLength = check_invoices.length;
for(var i = 0; i < intLength; i++) {
var check_invoice = check_invoices[i];
check_invoice.checked = blnChecked;
}
}

This is what this will do, for instance if you have 5 checkboxes, and you click check all,it check all, now if you uncheck all the checkbox probably by clicking each 5 checkboxs, by the time you uncheck the last checkbox, the select all checkbox also gets unchecked
$("#select-all").change(function(){
$(".allcheckbox").prop("checked", $(this).prop("checked"))
})
$(".allcheckbox").change(function(){
if($(this).prop("checked") == false){
$("#select-all").prop("checked", false)
}
if($(".allcheckbox:checked").length == $(".allcheckbox").length){
$("#select-all").prop("checked", true)
}
})

As I cannot comment, here as answer:
I would write Can Berk Güder's solution in a more general way,
so you may reuse the function for other checkboxes
<script language="JavaScript">
function toggleCheckboxes(source, cbName) {
checkboxes = document.getElementsByName(cbName);
for (var i = 0, n = checkboxes.length; i < n; i++) {
checkboxes[i].checked = source.checked;
}
}
</script>
<input type="checkbox" onClick="toggleCheckboxes(this,\'foo\')" /> Toggle All<br/>
<input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
<input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
<input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
<input type="checkbox" name="foo" value="bar4"> Bar 4<br/>
<input type="checkbox" name="foo" value="bar5"> Bar 5<br/>

$(document).ready(function() {
$(document).on(' change', 'input[name="check_all"]', function() {
$('.cb').prop("checked", this.checked);
});
});

Using jQuery and knockout:
With this binding main checkbox stays in sync with underliying checkboxes, it will be unchecked unless all checkboxes checked.
ko.bindingHandlers.allChecked = {
init: function (element, valueAccessor) {
var selector = valueAccessor();
function getChecked () {
element.checked = $(selector).toArray().every(function (checkbox) {
return checkbox.checked;
});
}
function setChecked (value) {
$(selector).toArray().forEach(function (checkbox) {
if (checkbox.checked !== value) {
checkbox.click();
}
});
}
ko.utils.registerEventHandler(element, 'click', function (event) {
setChecked(event.target.checked);
});
$(window.document).on('change', selector, getChecked);
ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
$(window.document).off('change', selector, getChecked);
});
getChecked();
}
};
in html:
<input id="check-all-values" type="checkbox" data-bind="allChecked: '.checkValue'"/>
<input id="check-1" type="checkbox" class="checkValue"/>
<input id="check-2" type="checkbox" class="checkValue"/>

to make it in short-hand version by using jQuery
The select all checkbox
<input type="checkbox" id="chkSelectAll">
The children checkbox
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
<input type="checkbox" class="chkDel">
jQuery
$("#chkSelectAll").on('click', function(){
this.checked ? $(".chkDel").prop("checked",true) : $(".chkDel").prop("checked",false);
})

Below methods are very Easy to understand and you can implement existing forms in minutes
With Jquery,
$(document).ready(function() {
$('#check-all').click(function(){
$("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function(){
$("input:checkbox").attr('checked', false);
});
});
in HTML form put below buttons
<a id="check-all" href="javascript:void(0);">check all</a>
<a id="uncheck-all" href="javascript:void(0);">uncheck all</a>
With just using javascript,
<script type="text/javascript">
function checkAll(formname, checktoggle)
{
var checkboxes = new Array();
checkboxes = document[formname].getElementsByTagName('input');
for (var i=0; i<checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = checktoggle;
}
}
}
</script>
in HTML form put below buttons
<button onclick="javascript:checkAll('form3', true);" href="javascript:void();">check all</button>
<button onclick="javascript:checkAll('form3', false);" href="javascript:void();">uncheck all</button>

Here is a backbone.js implementation:
events: {
"click #toggleChecked" : "toggleChecked"
},
toggleChecked: function(event) {
var checkboxes = document.getElementsByName('options');
for(var i=0; i<checkboxes.length; i++) {
checkboxes[i].checked = event.currentTarget.checked;
}
},

html
<input class='all' type='checkbox'> All
<input class='item' type='checkbox' value='1'> 1
<input class='item' type='checkbox' value='2'> 2
<input class='item' type='checkbox' value='3'> 3
javascript
$(':checkbox.all').change(function(){
$(':checkbox.item').prop('checked', this.checked);
});

1: Add the onchange event Handler
<th><INPUT type="checkbox" onchange="checkAll(this)" name="chk[]" /> </th>
2: Modify the code to handle checked/unchecked
function checkAll(ele) {
var checkboxes = document.getElementsByTagName('input');
if (ele.checked) {
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = true;
}
}
} else {
for (var i = 0; i < checkboxes.length; i++) {
console.log(i)
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].checked = false;
}
}
}
}

You can Use This code.
var checkbox = document.getElementById("dlCheckAll4Delete");
checkbox.addEventListener("click", function (event) {
let checkboxes = document.querySelectorAll(".dlMultiDelete");
checkboxes.forEach(function (ele) {
ele.checked = !!checkbox.checked;
});
});

You can use this simple code
$('.checkall').click(function(){
var checked = $(this).prop('checked');
$('.checkme').prop('checked', checked);
});

Maybe a bit late, but when dealing with a check all checkbox, I believe you should also handle the scenario for when you have the check all checkbox checked, and then unchecking one of the checkboxes below.
In that case it should automatically uncheck the check all checkbox.
Also when manually checking all the checkboxes, you should end up with the check all checkbox being automatically checked.
You need two event handlers, one for the check all box, and one for when clicking any of the single boxes below.
// HANDLES THE INDIVIDUAL CHECKBOX CLICKS
function client_onclick() {
var selectAllChecked = $("#chk-clients-all").prop("checked");
// IF CHECK ALL IS CHECKED, AND YOU'RE UNCHECKING AN INDIVIDUAL BOX, JUST UNCHECK THE CHECK ALL CHECKBOX.
if (selectAllChecked && $(this).prop("checked") == false) {
$("#chk-clients-all").prop("checked", false);
} else { // OTHERWISE WE NEED TO LOOP THROUGH INDIVIDUAL CHECKBOXES AND SEE IF THEY ARE ALL CHECKED, THEN CHECK THE SELECT ALL CHECKBOX ACCORDINGLY.
var allChecked = true;
$(".client").each(function () {
allChecked = $(this).prop("checked");
if (!allChecked) {
return false;
}
});
$("#chk-clients-all").prop("checked", allChecked);
}
}
// HANDLES THE TOP CHECK ALL CHECKBOX
function client_all_onclick() {
$(".client").prop("checked", $(this).prop("checked"));
}

Categories