Select checkbox to realize, part-election, radio

Global and select the radio the following two relationships:

1, when I have chosen to put all the radio on when the election should be all-state selection

2, when I cancel a radio, the whole election should be canceled state

If the relationship between the global selection and radio absence below two FIG occurs:

 

 In order to implement the code more clear and easy :(, so only check box, and can be modified according to their needs)

<div>
  <ul>
    <li> 
      <!--全选-->
      <input type="checkbox" id="all" class="parent_check">全选</li>
  </ul>
</div>
<div class="dataBox">
  <ul >
    <li >
      <input type="checkbox" id="checkbox_1" class="son_check">
    </li>
  </ul>
  <ul >
    <li >
      <input type="checkbox" id="checkbox_2" class="son_check">
    </li>
  </ul>
<div>
$ (function () { 
    // global checked and unchecked checkbox style 
    $ parentChexbox = $ ( '. parent_check '), // Select 
    $ dataBox = $ ( '. dataBox '), // for determining global and relationship subclass 
    $ sonCheckBox = $ ( '. son_check '); // check the individual subclasses 
 
    // select single global relationships 
    $ parentChexbox.click (function () { 
        var = $ $ checkboxs dataBox.find ( 'INPUT [type = "CheckBox"] '); 
        IF ($ (the this) .is (': the checked ')) { 
            $ checkboxs.prop ( "the checked", to true); 
        } the else { 
            $ checkboxs.prop ( "the checked", to false); 
        } 
    }); 
    
    $ sonCheckBox.each (function () { 
        $ (the this) .click (function () { 
            IF ($ (the this) .is ( ': the checked')) { 
                // is determined: check whether all the individual
                len = $ sonCheckBox.length var; 
                var NUM = 0; 
                $ sonCheckBox.each (function () { 
                    IF ($ (the this) .is ( ': the checked')) { 
                        NUM ++; 
                    } 
                }); 
                IF (NUM == len ) { 
                    $ parentChexbox.prop ( "the checked", to true); 
                } 
            } the else { 
                // uncheck single, global select all uncheck 
                $ parentChexbox.prop ( "the checked", to false); 
            } 
        }) 
    }) 
}) ;

 

Guess you like

Origin www.cnblogs.com/xiaowoniulx/p/11527620.html
Recommended