- <html>
- <head>
- <title></title>
- <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(document)
- .ready(function()
- {
- $("#chkselect")
- .change(function()
- {
- if ($(this)
- .is(":checked") == true)
- {
- $("input:checkbox[name=Options]")
- .prop("checked", true);
- $("label[for=chkselect]")
- .text("De-SelectAll");
- }
- else
- {
- $("input:checkbox[name=Options]")
- .prop("checked", false);
- $("label[for=chkselect]")
- .text("SelectAll");
- }
- });
- $("input:checkbox[name=Options]")
- .change(function()
- {
- var totalchkitems = $("input:checkbox[name=Options]")
- .length;
- var totalchkditems = $("input:checkbox[name=Options]:checked")
- .length;
- if (totalchkitems == totalchkditems)
- {
- $("#chkselect")
- .prop("checked", true);
- $("label[for=chkselect]")
- .text("De-SelectAll");
- }
- else
- {
- $("#chkselect")
- .prop("checked", false);
- $("label[for=chkselect]")
- .text("SelectAll");
- }
- });
- $("#btnSubmit")
- .click(function()
- {
- var txts = "";
- var values = "";
- if ($("input:checkbox[name=Options]")
- .is(":checked"))
- {
- $("input:checkbox[name=Options]:checked")
- .each(function()
- {
- values += $(this)
- .val() + ",";
- txts += $("label[for=" + $(this)
- .prop("id") + "]")
- .text() + ",";
- });
- txts = txts.substring(0, txts.length - 1);
- values = values.substring(0, values.length - 1);
- $("#spnResult")
- .html("selected Options:" + "<br/>" + "Text:" + txts + "<br/>" + "values" + values);
- }
- else
- {
- $("#spnResult")
- .html("<b> No Option is selected!!!!</b>");
- }
- });
- });
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <input type="checkbox" id="chkselect" />
- <label for="chkselect">Select All</label>
- <br />
- <br />
- <input type="checkbox" id="chk1" value="Opt1" name="Options" /><label for="chk1">Option1</label>
- <input type="checkbox" id="chk2" value="Opt2" name="Options" /><label for="chk2">Option2</label>
- <input type="checkbox" id="chk3" value="Opt3" name="Options" /><label for="chk3">Option3</label>
- <br />
- <br />
- <input type="button" id="btnSubmit" value="submit" />
- <br />
- <span id="spnResult"></span>
- </div>
- </form>
- </body>
- </html>
Checked and Unchecked example of check box and when we check checkboxes and click button then display the text and value of checkbox and when we checked parent checkbox the automatic checked of chilled checkboxe.
