DEV Community

loading...

How To Get Selected Checkbox List Value In JQuery

websolutionstuff profile image Websolutionstuff ・2 min read
  • In this small tutorial I will explain you to how to get selected checkbox value from checkbox list in jQuery, If you have multiple checkbox in table rows at that time we get checked checkbox value in array or string in jQuery.

  • So I have added below ready code for you so, you can copy and paste this code and get direct output, I have added some jQuery code and html checkbox and bootstrape cdn and jQuery link.

<html>
<head>
    <title>How to get selected checkbox value from checkboxlist in Jquery - websolutionstuff.com</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
    <div class="container" style="border:1px solid red; margin-top: 20px;">
        <h3 class="text-center">How to get selected checkbox value from checkboxlist in Jquery - websolutionstuff.com</h3>
        <div style="margin-left: 210px;">
        <input type="checkbox" id="id1" value="PHP"/> <label>PHP</label> <br>
        <input type="checkbox" id="id2" value="jQuery"/> <label>jQuery</label> <br>
        <input type="checkbox" id="id3" value="CSS"/> <label>CSS</label> <br>
        <input type="checkbox" id="id4" value="Bootstrap"/> <label>Bootstrap</label> <br>
        <input type="checkbox" id="id5" value="Laravel"/> <label>Laravel</label> <br><br>
        <input type="button" id="btn" value="Submit" class="btn btn-primary" style="margin-bottom: 20px;" />
        </div>
    </div>
</body>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            var selected = new Array();
            $("input[type=checkbox]:checked").each(function () {
                selected.push(this.value);
            });
            if (selected.length > 0) {
                alert("Selected items: " + selected.join(","));
            }
        });
    });
</script>
</html>
Enter fullscreen mode Exit fullscreen mode

And finally you can get output like below screen shot.

How To Get Selected Checkbox List Value In JQuery

Read Also : How To Delete Multiple Records Using Checkbox In Laravel

Discussion (0)

pic
Editor guide