Checkbox check all and uncheck all script
JavaScript check-all and uncheck-all script code. when click a button check-all and uncheck-all, and checkbox on change function check-all and uncheck all, also using JQuery for check-all checkbox. Get all checked checkbox value
function checkUncheckAll(checked) {
var checkboxes = document.getElementsByClassName("check_me");
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = checked;
}
}
//get checked checkboxes value
function getCheckedValue() {
var checkedvalue = "";
var checkboxes = document.getElementsByClassName("check_me");
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) {
checkedvalue += checkboxes[i].value + "\n";
}
}
alert(checkedvalue);
}
<button onclick="checkUncheckAll(true)">check all</button>
<button onclick="checkUncheckAll(false)">uncheck all</button>
<div id="checkbox_list">
<input type="checkbox" class="check_me" value="orange" id="ckbx_1">
<label class="form-check-label" for="ckbx_1">Orange</label> <br/>
<input type="checkbox" class="check_me" value="apple" id="ckbx_2">
<label class="form-check-label" for="ckbx_2">Apple</label> <br/>
<input type="checkbox" class="check_me" value="banana" id="ckbx_3">
<label class="form-check-label" for="ckbx_3">Banana</label>
</div>
<button onclick="getCheckedValue()">Get checked checkbox value</button>
function toggleCheck() {
var btn = document.getElementById("toggle_check");
var checkboxes = document.getElementsByClassName("check_me");
if (btn.innerText == "check all") {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true;
}
btn.innerText = "uncheck all";
} else {
for (var j = 0; j < checkboxes.length; j++) {
checkboxes[j].checked = false;
}
btn.innerText = "check all";
}
}
//get checked checkboxes value
function getCheckedValue() {
var checkedvalue = "";
var checkboxes = document.getElementsByClassName("check_me");
for (var i = 0; i < checkboxes.length; i++) {
if(checkboxes[i].checked){
checkedvalue += checkboxes[i].value + "\n";
}
}
alert(checkedvalue);
}
<button id="toggle_check" onclick="toggleCheck()">check all</button>
<div id="checkbox_list">
<input type="checkbox" class="check_me" value="orange" id="ckbx_1">
<label class="form-check-label" for="ckbx_1">Orange</label> <br/>
<input type="checkbox" class="check_me" value="apple" id="ckbx_2">
<label class="form-check-label" for="ckbx_2">Apple</label> <br/>
<input type="checkbox" class="check_me" value="banana" id="ckbx_3">
<label class="form-check-label" for="ckbx_3">Banana</label>
</div>
<button onclick="getCheckedValue()">Get checked checkbox value</button>
function checkAll() {
var checkbox = document.getElementById("check_all");
var all_checkboxes = document.getElementsByClassName("check_me");
if (checkbox.checked == true) {
for (var i = 0; i < all_checkboxes.length; i++) {
all_checkboxes[i].checked = true;
}
} else {
for (var j = 0; j < all_checkboxes.length; j++) {
all_checkboxes[j].checked = false;
}
}
}
//get checked checkboxes value
function getCheckedValue() {
var checkedvalue = "";
var checkboxes = document.getElementsByClassName("check_me");
for (var i = 0; i < checkboxes.length; i++) {
if(checkboxes[i].checked){
checkedvalue += checkboxes[i].value + "\n";
}
}
alert(checkedvalue);
}
<label class="form-check-label" for="check_all">Check all</label> <input type="checkbox" id="check_all" onchange="checkAll()">
<div id="checkbox_list">
<input type="checkbox" class="check_me" value="orange" id="ckbx_1">
<label class="form-check-label" for="ckbx_1">Orange</label> <br/>
<input type="checkbox" class="check_me" value="apple" id="ckbx_2">
<label class="form-check-label" for="ckbx_2">Apple</label> <br/>
<input type="checkbox" class="check_me" value="banana" id="ckbx_3">
<label class="form-check-label" for="ckbx_3">Banana</label>
</div>
<button onclick="getCheckedValue()">Get checked checkbox value</button>
//check all
$("#btn-check-all").click(function() {
$("#checkbox_list").find("input[type=checkbox]").prop("checked",true);
});
//uncheck all
$("#btn-uncheck-all").click(function() {
$("#checkbox_list").find("input[type=checkbox]").prop("checked", false);
});
//toggle check
$("#toggle-check-all").click(function() {
var btn_name = $(this);
if (btn_name.text() == "check all") {
$("#checkbox_list").find("input[type=checkbox]").prop("checked", true);
btn_name.text("uncheck all");
}else{
$("#checkbox_list").find("input[type=checkbox]").prop("checked", false);
btn_name.text("check all");
}
});
//checkbox
$("#checkbox-check-all").change(function() {
if ($(this).is(":checked")) {
$("#checkbox_list").find("input[type=checkbox]").prop("checked", true);
}else{
$("#checkbox_list").find("input[type=checkbox]").prop("checked", false);
}
});
//get value checked checkbox
$("#checked-value").click(function() {
var checkedvalue = "";
var checkboxes = $("#checkbox_list").find("input[type=checkbox]");
for (var i = 0; i < checkboxes.length; i++) {
if(checkboxes.eq(i).is(":checked")){
checkedvalue += checkboxes.eq(i).val() + "\n";
}
}
alert(checkedvalue);
});
check all <button id="btn-check-all">check all</button>
uncheck all <button id="btn-uncheck-all">uncheck all</button>
toggle check<button id="toggle-check-all">check all</button>
check all <input type="checkbox" id="checkbox-check-all">
<div id="checkbox_list">
<input type="checkbox" class="check_me" value="orange" id="ckbx_1">
<label class="form-check-label" for="ckbx_1">Orange</label> <br/>
<input type="checkbox" class="check_me" value="apple" id="ckbx_2">
<label class="form-check-label" for="ckbx_2">Apple</label> <br/>
<input type="checkbox" class="check_me" value="banana" id="ckbx_3">
<label class="form-check-label" for="ckbx_3">Banana</label>
</div>
<button id="checked-value">Get checked checkbox value</button>