Monday, 16 June 2014

Best way to get the multiple checkbox checked value using JQuery

Multiple check box checked value using JQuery


<div class="panel-body" id="checkboxlist">
   <p><input name="sort" type="checkbox" value="$0-$149" class="search" > $0 - $149</p>
   <p><input name="sort" type="checkbox" value="$150-$499" class="search"> $150 - $499</p>
   <p><input name="sort" type="checkbox" value="$500-$1499" class="search"> $500 - $1499</p>
   <p><input name="sort" type="checkbox" value="$1500-$2499" class="search"> $1500 - $2499</p>
   <p><input name="sort" type="checkbox" value="$2500Up" class="search"> $2500 And Up</p>
 </div>

Then add script:

<script>
$(".panel-body").on("change", "[type=checkbox]", function () {
    var s = "";
    $(".panel-body [type=checkbox]:checked").each(function () {
        s += this.value + ",";
    });
    alert(s.slice(0, s.length - 1));
    
});
</script>

{OR}

<script>
$(".panel-body").on("change", "[type=checkbox]", function () {
    alert("hello");
    var s = "";
    $(".panel-body [type=checkbox]:checked").each(function () {
        s += (s == '') ? this.value : "," + this.value;
    });
    alert(s);
   
});
</script>

Everytime a change happens in the text box, each event gets the values of checked checkboxes and adds them to the div.

 *************AWESOME J QUERY***********

No comments:

Post a Comment