mercredi 7 septembre 2016

moving based on whether checkbox contained within the is checked

I have a 'papers' table which contains 6 rows and 2 columns. In the first column is a checkbox and in the second row is the title of the paper. Once a user has checked 2 checkboxes i would like the rows which have unchecked checkboxes to move below the rows which have checked checkboxes.

I can get the checkboxes themselves to move but not the entire row! Any help you are willing to give is greatly appreciated, thanks in advance :)

        function core2() {
            var i = 0;

            $('.ATT').each(function () { if ($(this).is(':checked')) { i += 1 } });
            });

            if (i < 2 ) {
                $(".ATT:not(:checked)").insertBefore("#core2");

            };


            if (i == 2) {
                $(".ATT:not(:checked)").insertAfter("#core2");
               

            };

        }
    <table>
      <tr class="core1" ><td><input type = "checkbox" name="examlist"  value="ATTPTAX" id="ATTPTAX1"  class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
          PAPER 1
          </td> <td>
          </label></td></tr>
    <tr class="core1" ><td><input type = "checkbox" name="examlist"  value="ATTPTAX" id="ATTPTAX2"  class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
          PAPER 2
          </td> <td>
          </label></td></tr>
    <tr class="core1" ><td><input type = "checkbox" name="examlist"  value="ATTPTAX" id="ATTPTAX3"  class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
          PAPER 3
          </td> <td>
          </label></td></tr>
    <tr class="core1" ><td><input type = "checkbox" name="examlist"  value="ATTPTAX" id="ATTPTAX4"  class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
          PAPER 4
          </td> <td>
          </label></td></tr>
    <tr class="core1" ><td><input type = "checkbox" name="examlist"  value="ATTPTAX" id="ATTPTAX5"  class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
          PAPER 5
          </td> <td>
          </label></td></tr>
    <tr class="core1" ><td><input type = "checkbox" name="examlist"  value="ATTPTAX" id="ATTPTAX6"  class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
          PAPER 6
          </td> <td>
          </label></td></tr>
<tr id="core2"><td>Core 2</td><td></td></tr>
</table>

Leo




Aucun commentaire:

Enregistrer un commentaire