Getting val() of last checkbox checked by a user [duplicate]

Getting val() of last checkbox checked by a user [duplicate] - javascript

I have the following HTML:
<div class="pricing-levels-3">
<p><strong>Which level would you like? (Select 3 Levels)</strong></p>
<input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>
Live site:
http://www.chineselearnonline.com/amember/signup20.php
How can I do it so that the user can only select 3 of those checkboxes?

Using change event you can do something like this:
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
if($(this).siblings(':checked').length >= limit) {
this.checked = false;
}
});
See this working demo

Try like this.
On change event,
$('input[type=checkbox]').on('change', function (e) {
if ($('input[type=checkbox]:checked').length > 3) {
$(this).prop('checked', false);
alert("allowed only 3");
}
});
Check this in JSFiddle

Try this DEMO:
$(document).ready(function () {
$("input[name='vehicle']").change(function () {
var maxAllowed = 3;
var cnt = $("input[name='vehicle']:checked").length;
if (cnt > maxAllowed)
{
$(this).prop("checked", "");
alert('Select maximum ' + maxAllowed + ' Levels!');
}
});
});

$('.checkbox').click(function(){
if ($('.checkbox:checked').length >= 3) {
$(".checkbox").not(":checked").attr("disabled",true);
}
else
$(".checkbox").not(":checked").removeAttr('disabled');
});
i used this.

I think we should use click instead change
Working DEMO

$("input:checkbox").click(function(){
if ($("input:checkbox:checked").length > 3){
return false;
}
});

Working DEMO
Try this
var theCheckboxes = $(".pricing-levels-3 input[type='checkbox']");
theCheckboxes.click(function()
{
if (theCheckboxes.filter(":checked").length > 3)
$(this).removeAttr("checked");
});

I'd say like letiagoalves said, but you might have more than one checkbox question in your form, so I'd recommend to do like this:
var limit = 3;
$('input.single-checkbox').on('change', function(evt) {
if($('input.single-checkbox').siblings('input.single-checkbox:checked').length > limit) {
this.checked = false;
}
});

(function ($) {
$(document).ready(function () {
$(document).on("change", ".pricing-levels-3 input", function () {
var numberOfChecked = $(".pricing-levels-3 input:checkbox:checked").length;
if (numberOfChecked >= 2) {
$(".pricing-levels-3 input:not(:checked)").prop("disabled", true);
} else {
$(".pricing-levels-3 input:not(:checked)").removeAttr("disabled", true);
}
});
});
})(jQuery);

This is working for me with checkbox name.
<script>
// limit checkbox select
$('input[name=vehicle]').on('change', function (e) {
if ($('input[name=vehicle]:checked').length > 3) {
$(this).prop('checked', false);
alert("allowed only 3");
}
});
</script>

This is how I made it work:
// Function to check and disable checkbox
function limit_checked( element, size ) {
var bol = $( element + ':checked').length >= size;
$(element).not(':checked').attr('disabled',bol);
}
// List of checkbox groups to check
var check_elements = [
{ id: '.group1 input[type=checkbox]', size: 2 },
{ id: '.group2 input[type=checkbox]', size: 3 },
];
// Run function for each group in list
$(check_elements).each( function(index, element) {
// Limit checked on window load
$(window).load( function() {
limit_checked( element.id, element.size );
})
// Limit checked on click
$(element.id).click(function() {
limit_checked( element.id, element.size );
});
});

I have Alter this function to auto uncheck previous
var limit = 3;
$('.compare_items').on('click', function(evt) {
index = $(this).parent('td').parent('tr').index();
if ($('.compare_items:checked').length >= limit) {
$('.compare_items').eq(localStorage.getItem('last-checked-item')).removeAttr('checked');
//this.checked = false;
}
localStorage.setItem('last-checked-item', index);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="compare_items">1
<input type="checkbox" class="compare_items">2
<input type="checkbox" class="compare_items">3
<input type="checkbox" class="compare_items">4
<input type="checkbox" class="compare_items">5
<input type="checkbox" class="compare_items">6
<input type="checkbox" class="compare_items">7
<input type="checkbox" class="compare_items">8
<input type="checkbox" class="compare_items">9
<input type="checkbox" class="compare_items">10

I did this today, the difference being I wanted to uncheck the oldest checkbox instead of stopping the user from checking a new one:
let maxCheckedArray = [];
let assessmentOptions = jQuery('.checkbox-fields').find('input[type="checkbox"]');
assessmentOptions.on('change', function() {
let checked = jQuery(this).prop('checked');
if(checked) {
maxCheckedArray.push(jQuery(this));
}
if(maxCheckedArray.length >= 3) {
let old_item = maxCheckedArray.shift();
old_item.prop('checked', false);
}
});

This method works well with checkboxes in a container, such as bootstrap checkbox
const checkedLimmit = 2;
function ValidateCheckBoxGroup(container) {
if (container.find('input[type="checkbox"]:checked').length >= checkedLimmit) {
container.find('input[type="checkbox"]:not(:checked)').prop('disabled', true);
container.find('input[type="checkbox"]:not(:checked)').closest('div.checkbox').addClass('disabled');
} else {
container.find('input[type="checkbox"]:not(:checked)').prop('disabled', false);
container.find('input[type="checkbox"]:not(:checked)').closest('div.checkbox').removeClass('disabled');
}
}
$(function () {
// validate containers on page load
$('div.checkbox-group').each(function () {
ValidateCheckBoxGroup($(this));
});
// set checkbox events
$('div.checkbox-group input[type="checkbox"]').change(function () {
ValidateCheckBoxGroup($(this).closest("div.checkbox-group"));
});
});

JS and HTML
This worked for me what it does is that, the onclick function checkControl() will count the number of times the checkbox has been clicked then if it's greater than 3 display error message.
function checkboxControl(j) {
var total = 0;
var elem = document.getElementsByClassName("checkbox");
var error = document.getElementById("error");
for (var i = 0; i < elem.length; i++) {
if (elem[i].checked == true) {
total = total + 1;
}
if (total > 3) {
error.textContent = "You Must Select at Least 3";
elem[j].checked = false;
return false;
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<form action="">
<span id="error" style="color: red"></span>
<br>
<span>Python</span>
<input
type="checkbox"
class="checkbox"
name="interest[]"
onclick="checkboxControl(0)"
id="1"
/>
<br>
<span>Javascript</span>
<input
type="checkbox"
class="checkbox"
name="interest[]"
onclick="checkboxControl(1)"
id="1"
/><br>
<span>Go</span>
<input
type="checkbox"
class="checkbox"
name="interest[]"
onclick="checkboxControl(2)"
id="1"
/><br>
<span>Laravel</span>
<input
type="checkbox"
class="checkbox"
name="interest[]"
onclick="checkboxControl(3)"
id="1"
/>
</form>
</body>
</html>
This resources helped me understand
https://www.plus2net.com/javascript_tutorial/checkbox-limit-demo2.php

If you want to uncheck the checkbox that you have selected first under the condition of 3 checkboxes allowed. With vanilla javascript; you need to assign onclick = "checking(this)" in your html input checkbox
var queue = [];
function checking(id){
queue.push(id)
if (queue.length===3){
queue[0].checked = false
queue.shift()
}
}

This function simply checks if you have just checked a checkbox. If yes, it increments the checked value by one. If it reaches the limit then the next checkbox is rejected.
var limit = 3;
var checked = 0;
$('.single-checkbox').on('change', function() {
if($(this).is(':checked'))
checked = checked+1;
if($(this).is(':checked') == false)
checked = checked-1;
if(checked > limit) {
this.checked = false;
checked = limit;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricing-levels-3">
<p><strong>Which level would you like? (Select 3 Levels)</strong></p>
<input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>
<input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>
</div>

Related

Uncheck all checkboxes if "Other" checkbox is checked and get value

So, I have 4 checkboxes:
Heating
AC
Cold Chain
Others
The condition is, you can multiple check the three: Heating, AC, and Cold Chain. But when you check on "Other", the three will be unchecked. And when you check again on any of the three, the Other checkbox will be unchecked.
When the Others is checked, a "Please specify" input text will appear.
And in the summary, Looking for solutions in Others - [value]
This is my fiddle
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox() {       
$("input:checkbox").change(function() {                 
selectedCB = [];        
notSelectedCB = [];                
CountSelectedCB.length = 0;        
$("input:checkbox").each(function() {            
if ($(this).is(":checked")) {                
CountSelectedCB.push($(this).attr("value"));            
}        
});                
$('input[name=solutions]').val(CountSelectedCB).blur();    
});
}   
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox() {       
$("input:radio").change(function() {                 
selectedRB = [];        
notSelectedRB = [];                
CountSelectedRB.length = 0;        
$("input:radio").each(function() {            
if ($(this).is(":checked")) {                
CountSelectedRB.push($(this).attr("value"));            
}        
});                
$('input[name=existing]').val(CountSelectedRB).blur();     
});
}
$('#solutions, #existing').bind('keyup blur', function() {            
$('#summary').val('You are looking for solutions in ' +                               $('#solutions').val() +                               (' \n') +                              'Are you using an existing customer? ' +                               $('#existing').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>

Made a simple example for you how you can do this using the prop() and siblings() functions.
Added some classes for better selectors.
$('#wrapper .some-checkbox').on('change', function() {
var $this = $(this);
if ($this.prop('checked')) {
if ($this.is('.some-others')) {
$this.siblings().prop('checked', false);
}
else {
$this.siblings('.some-others').prop('checked', false);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<input class="some-checkbox" type="checkbox" value="Heating">Heating<br>
<input class="some-checkbox" type="checkbox" value="Ac">AC<br>
<input class="some-checkbox" type="checkbox" value="Cold Chain">Cold Chain<br>
<input class="some-checkbox some-others" type="checkbox" value="Others">Others<br>
</div>

You need to check if the checkbox Others is checked, then uncheck the other checkboxes with $('<your-checkbox->').prop('checked', false);
For example:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox(){    
    $("input:checkbox").change(function() {          
        selectedCB = [];
        notSelectedCB = [];
        
        CountSelectedCB.length = 0;
        $("input:checkbox").each(function() {
            if ($(this).is(":checked")) {
                CountSelectedCB.push($(this).attr("value"));
if ($(this).attr("value") === "Others") {
CountSelectedCB = []; // reset result
$("input:checkbox").each(function() {
if ($(this).attr("value") !== "Others") {
$(this).prop('checked', false); // uncheck
}
});
$('input[name=solutions]').hide(); // toggle input
$('input[name=specify]').show(); // toggle input
}
            }
        });
        
        $('input[name=solutions]').val(CountSelectedCB).blur();
    });
}    
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox(){    
    $("input:radio").change(function() {          
        selectedRB = [];
        notSelectedRB = [];
        
        CountSelectedRB.length = 0;
        $("input:radio").each(function() {
            if ($(this).is(":checked")) {
                CountSelectedRB.push($(this).attr("value"));
            }
        });
        
        $('input[name=existing]').val(CountSelectedRB).blur(); 
    });
}
$('#solutions, #existing').bind('keyup blur', function() {
        
    $('#summary').val('You are looking for solutions in ' + 
                             $('#solutions').val() + 
                             (' \n') +
                             'Are you using an existing customer? ' + 
                             $('#existing').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" placeholder="Please specify" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br>
Summary:<br>
<textarea type='text' id="summary"></textarea>

Well, I modified your displayCheckbox() function. Please try like this. I think your problem will be solved.
function displayCheckbox(){    
$("input:checkbox").change(function() {
selectedCB = [];
notSelectedCB = [];
CountSelectedCB.length = 0;
if($('input:checkbox[value="Others"]').is(":checked")){
$('input:checkbox').not(this).prop('checked', false);
CountSelectedCB.length = 0;
CountSelectedCB.push($(this).attr("value"));
}else{
$("input:checkbox").each(function() {
if ($(this).is(":checked")) {
CountSelectedCB.push($(this).attr("value"));
}
});
}
$('input[name=solutions]').val(CountSelectedCB).blur();
});
}
Thank you.

I've updated your Fiddle code. Please see this, it will solve your problem.
Here is the snippet:
$(document).ready(displayCheckbox);
CountSelectedCB = [];
function displayCheckbox() {       
$("input:checkbox").change(function() {                 
selectedCB = [];        
notSelectedCB = [];
selectedValue = $(this).attr("value");                
CountSelectedCB.length = 0;
if (selectedValue === "Others" && $(this).is(":checked")) {
uncheckAllCheckBox();
$(this).prop('checked', true);
CountSelectedCB.push(selectedValue);
} else {
$("input:checkbox").each(function() {
if ($(this).attr("value") === "Others")
$(this).prop('checked', false);
if ($(this).is(":checked")) {
CountSelectedCB.push($(this).attr("value"));
}
});
}                        
$('input[name=solutions]').val(CountSelectedCB).blur();    
});
}
function uncheckAllCheckBox() {
$("input:checkbox").each(function() {
$(this).prop('checked', false);
CountSelectedCB.length = 0;
});
}
$(document).ready(displayRadiobox);
CountSelectedRB = [];
function displayRadiobox() {       
$("input:radio").change(function() {                 
selectedRB = [];        
notSelectedRB = [];                
CountSelectedRB.length = 0;        
$("input:radio").each(function() {            
if ($(this).is(":checked")) {                
CountSelectedRB.push($(this).attr("value"));            
}        
});                
$('input[name=existing]').val(CountSelectedRB).blur();     
});
}
$('#solutions, #existing').bind('keyup blur', function() {            
$('#summary').val('You are looking for solutions in ' +                               $('#solutions').val() +                               (' \n') +                              'Are you using an existing customer? ' +                               $('#existing').val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> Looking for a solutions in:<br>
<input type="checkbox" value="Heating">Heating<br>
<input type="checkbox" value="Ac">AC<br>
<input type="checkbox" value="Cold Chain">Cold Chain<br>
<input type="checkbox" value="Others">Others<br>
</div>
<input name="specify" type="text" id="specify" style="display: none">
<input name="solutions" type="text" id="solutions">
<div><br>Are you an exisiting customer?<br>
<input type="radio" value="Yes" name="radio">Yes<br>
<input type="radio" value="No" name="radio">No
</div>
<input name="existing" type="text" id="existing">
<br><br> Summary:
<br>
<textarea type='text' id="summary"></textarea>
Updated JSFiddle Code

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.

Disable button if all checkboxes are unchecked

I have a list of checkboxes, and I need to disable my submit button if none of them are checked, and enable it as soon as at least one gets checked. I see lots of advice for doing this with just a single checkbox, but I'm hung up on getting it to work with multiple checkboxes. I want to use javascript for this project, even though I know there are a bunch of answers for jquery. Here's what I've got - it works for the first checkbox, but not the second.
HTML:
<input type="checkbox" id="checkme"/> Option1<br>
<input type="checkbox" id="checkme"/> Option2<br>
<input type="checkbox" id="checkme"/> Option3<br>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
Javascript:
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('sendNewSms');
// when unchecked or checked, run the function
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}

I'd group your inputs in a container and watch that for events using addEventListener. Then loop through the checkboxes, checking their status. Finally set the button to disabled unless our criteria is met.
var checks = document.getElementsByName('checkme');
var checkBoxList = document.getElementById('checkBoxList');
var sendbtn = document.getElementById('sendNewSms');
function allTrue(nodeList) {
for (var i = 0; i < nodeList.length; i++) {
if (nodeList[i].checked === false) return false;
}
return true;
}
checkBoxList.addEventListener('click', function(event) {
sendbtn.disabled = true;
if (allTrue(checks)) sendbtn.disabled = false;
});
<div id="checkBoxList">
<input type="checkbox" name="checkme"/> Option1<br>
<input type="checkbox" name="checkme"/> Option2<br>
<input type="checkbox" name="checkme"/> Option3<br>
</div>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />

html
<input type="checkbox" class="checkme"/> Option1<br>
<input type="checkbox" class="checkme"/> Option2<br>
<input type="checkbox" class="checkme"/> Option3<br>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
js
var checkerArr = document.getElementsByClassName('checkme');
var sendbtn = document.getElementById('sendNewSms');
// when unchecked or checked, run the function
for (var i = 0; i < checkerArr.length; i++) {
checkerArr[i].onchange = function() {
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
}

I guess this code will help you
window.onload=function(){
var checkboxes = document.getElementsByClassName('checkbox')
var sendbtn = document.getElementById('sendNewSms');
var length=checkboxes.length;
for(var i=0;i<length;i++){
var box=checkboxes[i];
var isChecked=box.checked;
box.onchange=function(){
sendbtn.disabled=isChecked?true:false;
}
}
// when unchecked or checked, run the function
}
<input type="checkbox" id="check1" class="checkbox"/> Option1<br>
<input type="checkbox" id="check2" class="checkbox"/> Option2<br>
<input type="checkbox" id="check3" class="checkbox"/> Option3<br>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
Few suggestions
1.Always id should be unique. HTML does not show any error, if you give multiple objects with the same id but when you try to get it by document.getelementbyid it always return the first one,because getelementbyid returns a single element
when there is such requirement, you should consider having a classname or searching through the element name because getelementsbyclassname/tag returns an array
Here in the markup i have added an extra class to query using getelementsbyclassname
To avoid adding extra class, you can also consider doing it by document.querySelectorAll
check the following snippet
window.onload=function(){
var checkboxes = document.querySelectorAll('input[type=checkbox]')
var sendbtn = document.getElementById('sendNewSms');
var length=checkboxes.length;
for(var i=0;i<length;i++){
var box=checkboxes[i];
var isChecked=box.checked;
box.onchange=function(){
sendbtn.disabled=isChecked?true:false;
}
}
// when unchecked or checked, run the function
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="check1" /> Option1<br>
<input type="checkbox" id="check2" /> Option2<br>
<input type="checkbox" id="check3" /> Option3<br>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
Hope this helps

Something like this would do. I'm sure you can do it with less code, but I am still a JavaScript beginner. :)
HTML
<input type="checkbox" class="checkme" data-id="checkMe1"/> Option1<br>
<input type="checkbox" class="checkme" data-id="checkMe2"/> Option2<br>
<input type="checkbox" class="checkme" data-id="checkMe3"/> Option3<br>
<input type="submit" name="sendNewSms" class="inputButton" disabled="disabled" id="sendNewSms" value=" Send " />
JavaScript
//keep the checkbox states, to reduce access to the DOM
var buttonStatus = {
checkMe1: false,
checkMe2: false,
checkMe1: false
};
//get the handles to the elements
var sendbtn = document.getElementById('sendNewSms');
var checkBoxes = document.querySelectorAll('.checkme');
//add event listeners
for(var i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].addEventListener('change', function() {
buttonStatus[this.getAttribute('data-id')] = this.checked;
updateSendButton();
});
}
//check if the button needs to be enabled or disabled,
//depending on the state of other checkboxes
function updateSendButton() {
//check through all the keys in the buttonStatus object
for (var key in buttonStatus) {
if (buttonStatus.hasOwnProperty(key)) {
if (buttonStatus[key] === true) {
//if at least one of the checkboxes are checked
//enable the sendbtn
sendbtn.disabled = false;
return;
}
}
}
//disable the sendbtn otherwise
sendbtn.disabled = true;
}

var check_opt = document.getElementsByClassName('checkit');
console.log(check_opt);
var btn = document.getElementById('sendNewSms');
function detect() {
btn.disabled = true;
for (var index = 0; index < check_opt.length; ++index) {
console.log(index);
if (check_opt[index].checked == true) {
console.log(btn);
btn.disabled = false;
}
}
}
window.onload = function() {
for (var i = 0; i < check_opt.length; i++) {
check_opt[i].addEventListener('click', detect)
}
// when unchecked or checked, run the function
}
<input type="checkbox" id="check1" class="checkit" />Option1
<br>
<input type="checkbox" id="check2" class="checkit" />Option2
<br>
<input type="checkbox" id="check3" class="checkit" />Option3
<br>
<input type="submit" name="sendNewSms" class="inputButton" disabled="true" id="sendNewSms" value=" Send " />

issue in hiding my data with checkbox

I have two series of data and trying to hide them by clicking on the check box but the data series do not get hidden.
You can see my data series in my fiddle.
And that is the code I have used for hiding them:
CSS:
<input type="checkbox" checked="checked" class="messageCheckbox" value="line1" onclick="showOrHide(0);" />1
<input type="checkbox" value="line2" checked="checked" class="messageCheckbox" onclick="showOrHide(1);" />2
Javascript:
showOrHide = function (i) {
var selectt = document.getElementsByClassName("messageCheckbox")[i].value;
if (document.getElementsByClassName("messageCheckbox")[i].checked) {
document.getElementsByClassName(selectt)[0].style.display = 'none';
} else {
document.getElementsByClassName(selectt)[0].style.display = 'block';
}
}

For this, you need to set the attribute visibility - http://jsfiddle.net/TrpcW/4/
<body>
<div class="line1">data1</div><div class="line2">data2</div>
<input type="checkbox" class="messageCheckbox" value="line1" onclick="showOrHide(0);" unchecked />1
<input type="checkbox" value="line2" class="messageCheckbox" onclick="showOrHide(1);" unchecked />2
</body>
showOrHide = function (i) {
var selectt = document.getElementsByClassName("messageCheckbox")[i].value;
if (document.getElementsByClassName("messageCheckbox")[i].checked) {
document.getElementsByClassName(selectt)[0].style.visibility = "hidden";
} else {
document.getElementsByClassName(selectt)[0].style.visibility = "visible";
}
}

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

We Keep Coding

JavaScript is the programming language of the Web.

Getting val() of last checkbox checked by a user [duplicate] - javascript

Using change event you can do something like this: var limit = 3; $('input.single-checkbox').on('change', function(evt) { if($(this).siblings(':checked').length >= limit) { this.checked = false; } }); See this working demo

Try like this. On change event, $('input[type=checkbox]').on('change', function (e) { if ($('input[type=checkbox]:checked').length > 3) { $(this).prop('checked', false); alert("allowed only 3"); } }); Check this in JSFiddle

Try this DEMO: $(document).ready(function () { $("input[name='vehicle']").change(function () { var maxAllowed = 3; var cnt = $("input[name='vehicle']:checked").length; if (cnt > maxAllowed) { $(this).prop("checked", ""); alert('Select maximum ' + maxAllowed + ' Levels!'); } }); });

$('.checkbox').click(function(){ if ($('.checkbox:checked').length >= 3) { $(".checkbox").not(":checked").attr("disabled",true); } else $(".checkbox").not(":checked").removeAttr('disabled'); }); i used this.

I think we should use click instead change Working DEMO

$("input:checkbox").click(function(){ if ($("input:checkbox:checked").length > 3){ return false; } });

Working DEMO Try this var theCheckboxes = $(".pricing-levels-3 input[type='checkbox']"); theCheckboxes.click(function() { if (theCheckboxes.filter(":checked").length > 3) $(this).removeAttr("checked"); });

This is working for me with checkbox name. <script> // limit checkbox select $('input[name=vehicle]').on('change', function (e) { if ($('input[name=vehicle]:checked').length > 3) { $(this).prop('checked', false); alert("allowed only 3"); } }); </script>

Related

Uncheck all checkboxes if "Other" checkbox is checked and get value

HTML - Javascript on check

Disable button if all checkboxes are unchecked

issue in hiding my data with checkbox

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

Categories

Resources