Wednesday, May 28, 2014

Get Selected Check box Value and Select all Check boxes using "Select All" option using JavaScript

Html / JSP

  <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
      $('.btnGetSelectedValue').click( function(){
        var chkId = '';
        $('.chkNumber:checked').each(function() {
          chkId += $(this).val() + ",";
        });
        chkId =  chkId.slice(0,-1);
        alert(chkId);
      });

      $('.chkSelectAll').click( function(){

        $('.chkNumber').prop('checked', $(this).is(':checked'));
      });

    });

  </script>

  <div>
    <input type="checkbox" class="chkNumber" value="1" />One<br />
    <input type="checkbox" class="chkNumber" value="2" />Two<br />
    <input type="checkbox" class="chkNumber" value="3" />Three<br />
    <input type="checkbox" class="chkNumber" value="4" />Four<br />
    <input type="checkbox" class="chkNumber" value="5" />Five<br /><br />
  </div>
  <button type="button" class="btnGetSelectedValue">GetSelectedValue</button><br />
  <input type="checkbox" class="chkSelectAll" />SelectAll

get all selected checkbox value

var chkId = '';
$('.chkNumber:checked').each(function() {
  chkId += $(this).val() + ",";
});
chkId = chkId.slice(0,-1);// Remove last comma

Select all CheckBox on single click

$('.chkNumber').prop('checked', true);



No comments:

Post a Comment