Get checked checkbox value from checkboxlist in Jquery

March 24, 2020 XpertPhp

In this article, we will explain how to get checked checkbox value from the checkbox list in jquery. We will give you a simple example of jquery.

when we filter product variants. At that time we need this type of example. so we took a simple example of a color filter for just understand.

This time, when you select the checkbox in the checkbox list, the checkbox value is stored in the array. After that, the saved value is displayed when you click the button. To do this, we check with each loop help which checkbox is checked or unchecked.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Get checked checkbox value from checkboxlist in Jquery - XpertPhp</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    $(function () {
        $("#btnClick").click(function () {
            var checked = new Array();
 
            $("input[type=checkbox]:checked").each(function () {
                checked.push(this.value);
            });
 
            if (checked.length > 0) {
                alert("checked values: " + checked.join(","));
            }
        });
    });
</script>
</head>
<body>

<div class="container">
    <div class="checkbox">
      <label><input type="checkbox" name="red" value="red">Red</label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="green" value="green">Green</label>
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="yellow" value="yellow">Yellow</label>
    </div>
    <button type="submit" id="btnClick" class="btn btn-default">Get Value</button>

</div>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Get checked checkbox value from checkboxlist in Jquery - XpertPhp</title>

$(function () {

$("#btnClick").click(function () {

var checked = new Array();

$("input[type=checkbox]:checked").each(function () {

checked.push(this.value);

});

if (checked.length > 0) {

alert("checked values: " + checked.join(","));

}

});

</script>

</head>

<body>

</div>

<label><input type="checkbox" name="green" value="green">Green</label>

</div>

<label><input type="checkbox" name="yellow" value="yellow">Yellow</label>

</div>

<button type="submit" id="btnClick" class="btn btn-default">Get Value</button>

</div>

</body>

</html>

Please follow and like us:

Related posts: