How to get value of all selected checkbox by using jQuery?

Question

HTML code:

<form method="post" id="cate-form">
            <ul class="expander-list" id="category">
              <li> 
                <div class="radio" style="padding-left:0px">
                  <label>
                     <input type="checkbox" id="all" value="all">
                    All </label>
                </div>
              </li>
              <li> 
                <div class="radio" style="padding-left:0px">
                  <label>
                     <input type="checkbox" name="filter[]" value="active">
                    Active </label>
                </div>
              </li>
              <li> 
                <div class="radio" style="padding-left:0px">
                  <label>
                     <input type="checkbox" name="filter[]" value="inactive">
                    Inactive </label>
                </div>
              </li>
            </ul>
            </form>

jQuery Code:

<script>
        $(document).ready(function(){
            $("#all").click(function() {
              $(':checkbox').prop('checked', this.checked);
            });
            $(":checkbox").change(function(){
                var checked = [];
                alert("it running");
                $('input[name=checkbox] :checked').each(function(){
                    alert("data is pushing inside checked array");
                    checked.push($(this).val());
                })
            })
        });
        </script>

By clicking on all checkbox it selecting all checkboxes. but How can I get a value of an all selected checkboxes at a time.I searched on google for specific this query but nothing helpful is found now please help me for solving a this issue and thanks in advance.

Answer 1

change

$('input[name=checkbox] :checked')

to

$('input[type=checkbox]:checked') 

since your checkboxes are actually named filter[] but their type is checkbox. your code should work then

Answer 2

if you want all value in an array then try this:-

var checkedValues = $('input:checkbox:checked').map(function() {
    return this.value;
}).get();