Using JavaScript Checkbox Check All And Uncheck

JavaScript check-all and uncheck-all function 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

1

Button Click Check All Checkbox

JS Function Button Click Check All And Uncheck

JavaScript
const checkUncheckAll = checked => {
    let checkboxes = document.getElementsByClassName("check_me");
    for (let i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = checked;
    }
};

Usage Button Click Check All

HTML
<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>
Try it Yourself Run code
2

Toggle Button Check-all Checkbox

JS Function Toggle Button Click Check All And Uncheck

JavaScript
const toggleCheck = () => {
    let btn = document.getElementById("toggle_check");
    let checkboxes = document.getElementsByClassName("check_me");
    // check all
    if (btn.innerText == "check all") {
        for (let i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = true;
        }
        btn.innerText = "uncheck all";
    } else {
        // uncheck all
        for (let j = 0; j < checkboxes.length; j++) {
            checkboxes[j].checked = false;
        }
        btn.innerText = "check all";
    }
};

Usage Toggle Button Click Check All

JavaScript
<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>
Try it Yourself Run code
3

Checkbox Change Check All Checkbox

JS Function Checkbox Change Check All And Uncheck

JavaScript
const checkAll = () => {
    let checkbox = document.getElementById("check_all");
    let all_checkboxes = document.getElementsByClassName("check_me");

    // check all
    if (checkbox.checked == true) {
        for (let i = 0; i < all_checkboxes.length; i++) {
            all_checkboxes[i].checked = true;
        }
    } else {
        // uncheck all
        for (let j = 0; j < all_checkboxes.length; j++) {
            all_checkboxes[j].checked = false;
        }
    }
}

Usage Checkbox Change Check All

JavaScript
<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>
Try it Yourself Run code
4

JQuery Check All Checkbox

JQuery Function Checkbox Check All, Uncheck, Toggle Check

JQuery
//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() {
    let 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() {
    let checkedvalue = "";
    let checkboxes = $("#checkbox_list").find("input[type=checkbox]");
    for (let i = 0; i < checkboxes.length; i++) {
        if (checkboxes.eq(i).is(":checked")) {
            checkedvalue += checkboxes.eq(i).val() + "\n";
        }
    }
    alert(checkedvalue);
});

Usage Checkbox Check All Toggle Check

JavaScript
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>
Try it Yourself Run code

JavaScript Get Checked Checkbox Value

JavaScript
//get checked checkboxes length and value
const getCheckedValue = () => {
    let checkedvalue = "";
    let checkboxes = document.getElementsByClassName("check_me");
    let total_checked = 0;

    for (let i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            checkedvalue += checkboxes[i].value + "\n";
            total_checked++;
        }
    }
    alert("checked length = "+total_checked+' \n\n '+checkedvalue);
}
Report Problem