Post
Ask Question

Checkbox Example in jQuery

  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5.     <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>  
  6.     <script type="text/javascript">  
  7.     $(document)  
  8.         .ready(function()  
  9.         {  
  10.             $("#chkselect")  
  11.                 .change(function()  
  12.                 {  
  13.                     if ($(this)  
  14.                         .is(":checked") == true)  
  15.                     {  
  16.                         $("input:checkbox[name=Options]")  
  17.                             .prop("checked", true);  
  18.                         $("label[for=chkselect]")  
  19.                             .text("De-SelectAll");  
  20.                     }  
  21.                     else  
  22.                     {  
  23.                         $("input:checkbox[name=Options]")  
  24.                             .prop("checked", false);  
  25.                         $("label[for=chkselect]")  
  26.                             .text("SelectAll");  
  27.                     }  
  28.                 });  
  29.             $("input:checkbox[name=Options]")  
  30.                 .change(function()  
  31.                 {  
  32.                     var totalchkitems = $("input:checkbox[name=Options]")  
  33.                         .length;  
  34.                     var totalchkditems = $("input:checkbox[name=Options]:checked")  
  35.                         .length;  
  36.                     if (totalchkitems == totalchkditems)  
  37.                     {  
  38.                         $("#chkselect")  
  39.                             .prop("checked", true);  
  40.                         $("label[for=chkselect]")  
  41.                             .text("De-SelectAll");  
  42.                     }  
  43.                     else  
  44.                     {  
  45.                         $("#chkselect")  
  46.                             .prop("checked", false);  
  47.                         $("label[for=chkselect]")  
  48.                             .text("SelectAll");  
  49.                     }  
  50.                 });  
  51.             $("#btnSubmit")  
  52.                 .click(function()  
  53.                 {  
  54.                     var txts = "";  
  55.                     var values = "";  
  56.                     if ($("input:checkbox[name=Options]")  
  57.                         .is(":checked"))  
  58.                     {  
  59.                         $("input:checkbox[name=Options]:checked")  
  60.                             .each(function()  
  61.                             {  
  62.                                 values += $(this)  
  63.                                     .val() + ",";  
  64.                                 txts += $("label[for=" + $(this)  
  65.                                         .prop("id") + "]")  
  66.                                     .text() + ",";  
  67.                             });  
  68.                         txts = txts.substring(0, txts.length - 1);  
  69.                         values = values.substring(0, values.length - 1);  
  70.                         $("#spnResult")  
  71.                             .html("selected Options:" + "<br/>" + "Text:" + txts + "<br/>" + "values" + values);  
  72.                     }  
  73.                     else  
  74.                     {  
  75.                         $("#spnResult")  
  76.                             .html("<b> No Option is selected!!!!</b>");  
  77.                     }  
  78.                 });  
  79.         });  
  80.     </script>  
  81. </head>  
  82.   
  83. <body>  
  84.     <form id="form1" runat="server">  
  85.         <div>  
  86.             <input type="checkbox" id="chkselect" />  
  87.             <label for="chkselect">Select All</label>  
  88.             <br />  
  89.             <br />  
  90.             <input type="checkbox" id="chk1" value="Opt1" name="Options" /><label for="chk1">Option1</label>  
  91.             <input type="checkbox" id="chk2" value="Opt2" name="Options" /><label for="chk2">Option2</label>  
  92.             <input type="checkbox" id="chk3" value="Opt3" name="Options" /><label for="chk3">Option3</label>  
  93.             <br />  
  94.             <br />  
  95.             <input type="button" id="btnSubmit" value="submit" />  
  96.             <br />  
  97.             <span id="spnResult"></span>  
  98.         </div>  
  99.     </form>  
  100. </body>  
  101.   
  102. </html>