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

Button click check all checkboxes

JavaScript

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

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

Toggle Button check-all checkboxes

JavaScript

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

HTML

<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

Checkbox change check all checkboxes

JavaScript

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

HTML

<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

jQuery check uncheck checkboxes

JavaScript

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

HTML

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

Report Problem