Page views:
18553

  In this article I’m going to explain how to check or uncheck all CheckBox or multiple CheckBox.

          It’s quite easy to do this by JQuery. I have done two examples, you can implement in your project based on requirement.

1.    Check or uncheck all CheckBox on Checkbox click

  2.    Check or uncheck all CheckBox on Button click 


1.   Check or uncheck all CheckBox on Checkbox click

Add JQuery library:

Please add this JQuery library on <head> section

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

 

Add Script:

<script type="text/javascript">

         $(document).ready( 

function () {

    //clicking the parent checkbox should check or uncheck all child checkboxes

    $(".parentCheckBox").click( 

    function () {

        $(this).parents('fieldset:eq(0)').find('.childCheckBox').prop('checked', this.checked);

    });

    //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox

    $('.childCheckBox').click( 

    function () {

        if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').prop('checked') == true && this.checked == false) $(this).parents('fieldset:eq(0)').find('.parentCheckBox').prop('checked', false);

        if (this.checked == true) {

            var flag = true;

            $(this).parents('fieldset:eq(0)').find('.childCheckBox').each( 

            function () {

                if (this.checked == false) flag = false;

            });

            $(this).parents('fieldset:eq(0)').find('.parentCheckBox').prop('checked', flag);

        }

    });

});

</script>

 

Add HTML Markup:

  <fieldset>

        <input type="checkbox" class="parentCheckBox" />Parent 1 <br />

        <input type="checkbox" class="childCheckBox" />Child 1-1 <br />

        <input type="checkbox" class="childCheckBox" />Child 1-2 <br />        

        <input type="checkbox" class="childCheckBox" />Child 1-3 <br />        

        <input type="checkbox" class="childCheckBox" />Child 1-4 <br />        

        <input type="checkbox" class="childCheckBox" />Child 1-5 <br />        

    </fieldset>

    <fieldset>

        <input type="checkbox" class="parentCheckBox" />Parent 2 <br />       

        <input type="checkbox" class="childCheckBox" />Child 2-1 <br />        

        <input type="checkbox" class="childCheckBox" />Child 2-2 <br />        

        <input type="checkbox" class="childCheckBox" />Child 2-3 <br />        

        <input type="checkbox" class="childCheckBox" />Child 2-4 <br />        

        <input type="checkbox" class="childCheckBox" />Child 2-5 <br />        

    </fieldset>

 

2.   Check or uncheck all CheckBox on Button click

 Demo:

             

Add JQuery library:

Please add this JQuery library on <head> section

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>


Add Script:

<script type="text/javascript" >

        $(document).ready(function () {

            $('.check:button').toggle(function () {

                $('input:checkbox').attr('checked', 'checked');

                $(this).val('uncheck all')

            }, function () {

                $('input:checkbox').removeAttr('checked');

                $(this).val('check all');

            })

        })

    </script>

 

Add HTML Markup:

   <input type="button" class="check" value="check all" />  

   <input type="checkbox" class="cb-element" /> Checkbox  1

   <input type="checkbox" class="cb-element" /> Checkbox  2

   <input type="checkbox" class="cb-element" /> Checkbox  3

 

cytotec abortion

abortion pill online buy abortion pills online
medical abortion pill online buy cytotec for 24 week abortion abortion pill


View demo Download
http://www.dotnetfox.com/Document/1102/0Demo1.gif

If you enjoyed this article, get email updates (it's free).


Related Articles
  • How to create JQuery UI Accordion in ASP.NETIn this article I’m going to explain how to use JQuery Accordion in ASP.NET. Accordion displays collapsible content panels for presenting information in a limited amount of space. The markup of your accordion container needs pairs of headers and content panels. Here I’ll show you how to create JQuery UI Accordion in ASP.NET. First we have to use following JQuery library and StyleSheet
  • Show GridView row details in Tooltip on mouseover using JQuery in ASP.NETIn this article I’m going to explain how to show GridView row details in Tooltip on mouseover using JQuery in ASP.NET. About JQuery Tooltip plugin: The jQuery Tooltip plugin let’s you transform native tooltip’s into customizable overlays. You can adjust their content, position and appearance. Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute i...
  • Google Geo Chart or Geo map with custom Color and Tooltip in ASP.NET I have already written an article for implementing Geo Chart in ASP.NET. In this article I’m going to explain how to use custom colors and tooltip in Google Geo Chart. In this demo I have implemented Geo chart for countries and percentage of world populations. For that first we have to create table with following fields.
  • Dynamic Accordion menu or Vertical menu using jQuery in ASP.NET MVCNavigation menu is most important in any web applications. While developing web applications, I used to create stuff more interactive by using jQuery and CSS. It’s quite different to create dynamic navigation menu in ASP.NET MVC. Whether it’s a horizontal or vertical menu, the idea remains same. This article will show you how to create jQuery Accordion menu dynamically in ASP.NET MVC web applicati...
  • JQuery vertical tabs example in ASP.NETIn this article I’m going to explain how to create JQuery vertical tabs in ASP.NET. When we consider user experience in ASP.NET application, JQuery is best option to fulfill user expectation. Easy responsive tabs enables you to create vertical tabs in web pages. You can download source code which is available along with this article.
  • JQuery sliding div from left to rightIn this article I’m going to explain how to create JQuery sliding div from left to right direction. JQuery is a powerful JavaScript library that designed to help with JavaScript programming. And it is a lightweight, "write less, do more", JavaScript library. The purpose of jQuery is to make it much easier to use JavaScript on your website. JQuery also simplifies a lot of the complicated things fro...
  • JQuery Check or uncheck all CheckBoxIn this article I’m going to explain how to check or uncheck all CheckBox or multiple CheckBox. It’s quite easy to do this by JQuery. I have done two examples, you can implement in your project based on requirement. 1.Check or uncheck all CheckBox on Checkbox click 2. Check or uncheck all CheckBox on Button click.
  • Get sum of multiple CheckBox values by using JQueryIn this article I’m going to explain how to count multiple Checkbox values by using JQuery. Can we do anything by using JQuery? Yes of Corse, I got one requirement that I have to get sum of multiple CheckBox values without any postback.
  • JQuery show hide multiple DIV specific time intervalIn this article I’m going to explain how to show/hide multiple DIV specific time interval by using JQuery. It’s quite easy to how/hide multiple DIV specific time interval by using JQuery. JQuery Show() and hide() function enables you to do this task with custom Fade In and Fade Out effect.
  • jQuery multiple checkbox values to comma separated stringIn this article I’m going to explain how to get multiple checkbox values output as comma separated string using jQuery. I got one requirement that I have to get multiple checkbox values output as comma separated string by using jQuery. Whenever I’m going to click checkboxes, the checkbox values should be added as comma separated string to textarea control.

Comments
comments powered by Disqus

Thanks for downloading..!!

×
Subscribe via Email
    
message to display in fancybox