? ????? jQuery? ???? ?? ???? ???? ?? ? ??? ?? ??? ???? ??? ?? ??? ?????. ? ?? ??? ?? ?? ???? ???? ?? ??? ?? ?? ??? ?? ?? ?? ??? ??? ??? ???? ??????. ???, ??? ?? ?? ??? ??? ??? ????? ??? ???? ???? ???? ?? "?? ??"???? ??? ???? ?????? ??? ????.

?? ?? ? HTML ?? ???

??? ?? ?? ??? ?? ??????? ?? ??? ???? "?? ??"?? "?? ??"??? ???????. ???? ?? ?? ??? ? ??? ??? ??? ? ??? ?? "?? ??"??? ????? ?? ??? ??? ????. ? ??? ???? ??? ??? ????.

1. ??? ?? ?? : ? ?? ?? ?? ??? ?? ?? ?? ????? ???? jQuery? ?? ??? ???? ????? ?? ? ?? ?? ??? ??? ?????.
2. ?? ??? ??? ?????? . ? ?? ?? ?? ???? ???? ???? ?? ?? ? ? ??? ?? ??? ??? ??????.

?? ??? ???? ??? HTML ??? ????? MyDIV ???? ???? ??? ? ??? ??? ???? SelectAll ???? ???? "?? ??"???? ?????.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<div class="action" id="action" title="action">
   
   <div class="mydiv">
       <div>  <br>
       <div>  ?? 1  <br>
       <div>  item 2  <br>
       <div>  ?? 3  <br>
   </div>

   
   <div class="mydiv">
       <div>  ??  <br>
       <div>  ?? 27  <br>
       <div>  ?? 28  <br>
       <div>  ?? 29  <br>
       <div>  ?? 30  <br>
       <div>  ?? 31 
   </div>
</div>
<p> ?? ????? ? ?? ?? ?? ??? MyDIV ???? ???? ? ??? "?? ??"????? SELECTALL ???? ?????.</p>
<h3> jQuery ?? ??</h3>
<p> ???? jQuery? ???? ?? ? ?? ?? ??? ???? ???? "?? ??"??? ? ?? ???? ?? ???? ?????.</p>
<h4> 1.“ALL/NO SELECT ALL SELECT”???? ??</h4>
<p> ???? "?? ??"???? ???? ?? ??? ??? ?? ??? ???? ?? ?? ???? ??? ??? ????????.</p>
<pre class="brush:php;toolbar:false"> $ ( '. selectall'). on ( 'click', function () {
  // ??? ??? ??? ?????.

  // ?? ??? ?? .myDiv ??? ???? ?? ?? $ (this) .parents ( '. myDiv'). ?? ( 'input [type = "checkbox"]'). ? (function () {
    // "?? ??"??? $ (this) .prop ( 'Checked, isselected)? ???? ?? ?? ??? ??? ??? ??? ???? ?????.
  });
});

????:

• $ ( '. selectall'). on ( 'click', function () {...}) : selectall ???? ???? ???? ?? ?? ???? ????.
• $ (this) .is ( ': Checked') : ?? ?? ? "?? ??"???? ??? ?? (true ?? false)? ?????.
• $ (this) .parents ( '. mydiv') : ?? ?? ? "?? ??"????? ?? ??? ?? MyDiv ??? ?????. ?? ?? ??? ?? ?????? ????? ????????.
• .find ( 'input [type = "checkbox"]') : ?? MyDiv ??? "?? ??"??? ??? ???? ?? ?? ???? ?? ??? ?????.
• .Each (function () {...}) : ?? ? ?? ???? ?? ?????.
• $ (this) .prop ( 'Checked', isselected) : ? ???? ?? ? ??? ???? isselected ??? ????????.

2. ?? ???? ?? ??

???? ??? ?? ???? ???? ?? ? ?? ?? ???? ??? ??? ???? "?? ??"???? ??? ???? ?????????. ?? ??? ??? ????. ?? ?? ???? ???? "?? ??"???? ???????. ??? ??? "?? ??"???? ?? ??? ?? ???? ??????.

 $ ( 'input : not ( ". selectall")'). on ( 'click', function () {
  // ?? ?????? ?? ???????. $ parentdiv = $ (this) .parents ( '. mydiv');
  //? ??? "?? ??"???? ?????.

  // "?? ??"???? ???? ??? ?? ???? ?? ??????.
  // "?? ??"???? ?? ??? ???? ??? ???? ?? ??????.

  // ?? ?? ???? ???? "?? ??"???? ??????.
    $ selectAllCheckbox.Prop ( 'Checked', True);
  } ? ?? {
    // ??? ??? "?? ??"???? ?? ?? $ selectallcheckbox.prop ( 'Checked', false);
  }
});

????:

• $ ( 'input : not ( ". selectall")'). on ( 'click', function () {...}) : selectall ??? ???? ?? ?? ?? ???? ????.
• $ parentdiv = $ (this) .parents ( '. mydiv'); : ?? ???? ?? ?????? MyDiv ?? ??? ?????.
• $ selectallcheckbox = $ parentdiv.find ( '. selectall'); : ?? "?? ??"???? ?????.
• $ parentdiv.find ( 'input : not ( ". selectall")').
• $ parentdiv.find ( '?? : ?? : not ( ". selectall")).
• TotalCheckboxes? CheckedCheckboxes? ???? ?? ?? ???? ?????? ??? ???? ?? ?? $ selectAllCheckbox? ??? ??? ????????.

??? jQuery ?? ??

?? ? ??? ?? ???? DOM?? ? ??????.

 $ (document) .ready (function () {
    // 1. "ALL/NO SELECT"ALL SELECT "Check Box $ ( '. selectAll')? ?? ??. on ( 'click', function () {
        isselected = $ (this) .is ( ': checked');
        $ (this) .parents ( '. mydiv'). ?? ( 'input [type = "checkbox"]'). prop ( 'checked', isselected);
    });

    // 2. ?? ???? ?? ?? ?? $ ( 'input : not ( ". selectall")'). on ( 'click', function () {
        $ parentdiv = $ (this) .parents ( '. mydiv');
        $ selectallcheckbox = $ parentdiv.find ( '. selectall');

        TotalCheckboxes = $ parentDiv.Find ( 'input : not ( ". selectall")'). ??;
        checkedcheckboxes = $ parentdiv.find ( '?? : ?? : not ( ". selectall")). ??;

        // ?? ?? ???? ???? "?? ??"???? ??????.
            $ selectAllCheckbox.Prop ( 'Checked', True);
        } ? ?? {
            // ??? ??? "?? ??"???? ?? ?? $ selectallcheckbox.prop ( 'Checked', false);
        }
    });
});

?? ? ?? ??

• ??? ??? : .parents ( '. mydiv')? .find ()? ??? ???? ?? ??? ?? ???? ??????? ?????. ?? ?? ?? ??? ??? ???? ?? ??? ???? ???? ????.
• ??? ??? : ?????? ? ???? ?? ?? ???? ?? ???? ???? ?? ? ????. ? ?? ??? ???? ???? ???? ?? ??? ????? ?? ????.

   $ (document) .on ( 'click', '.selectall', function () { / * ... * /});
  $ (document) .on ( 'click', 'input : not ( ". selectall")', function () { / * ... * /});

  ????? ??? DOM? ???? ?? ? ??? ??? ???? ??? ?????.

• ?? ?? ?? : ?????? ? ? ?? ???? ?? ??? ?? "?? ??"???? ?? ??? ???? ????? $ (??) .ready ()? ???? ? ?? ????. ?? ??, ?? ??? ?? ???? ???? ?????? (?? ??? ??? ?? ?? ??) ??? ??? ???? ???? ??? ? ????.
• ??? ?? : ?? ?? ?? ??? ???? ? ? "?? ??"???? ??? ??????. ????? ?? ???? ???? ?? ?? ?? ???? ???? ??? ??????.
• ?? ?? ?? : ?? ?? ?????? ??? ???? ?? ??? DOM ??? ??? ??? ? ? ????. ??? ?? ???? ????? ?? ?? ?? ??? ?? ??? ??????. ?? ?? ??? ???? ?? DOM ????? ?? ? ??? DOM ?? ???? ??? ? ????.

??

? ????? ?? jQuery? ???? ???? "ALL SELECT"? "SELECT"LINGAGE ??? ?? ??? ?????. ??? ??? HTML ?? ?? (?? ?? ???? ???? ?? ???? ???? "??"???? ??)?? ??? ??? jQuery ??? ? ??? ?? ??? ????. ?? ??? ?????? ?? ???? ?????? ??? ??? ?? ???? ??? ?? ??? ?? ??????. ??? ??? ??????? ???? ??? ?? ? ??????? ???? ? ??????.