Tạo nút chọn và hủy chọn tất cả checkbox như thế nào?

Home Forums Hỏi đáp Tạo nút chọn và hủy chọn tất cả checkbox như thế nào?

This topic contains 2 replies, has 3 voices, and was last updated by Ảnh hồ sơ của TheBigBang TheBigBang 3 years, 8 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #6617
    Ảnh hồ sơ của Jerry
    Jerry
    Member

    Mọi người cho mình hỏi cái này. Mình có 1 danh sách gồm nhiều checkbox, mình muốn tạo 1 cái nút hoặc checkbox để khi chọn hay click vào nó thì tất cả các checkbox trong danh sách đều được chọn. Bác nào biết chỉ giúp, dùng jquery, php hay java script cũng đc. Thanks

    #7621
    Ảnh hồ sơ của Quốc
    Quốc
    Member

    Dùng jquery để đưa vào là được bạn à.

    #7622
    Ảnh hồ sơ của TheBigBang
    TheBigBang
    Member

    Bạn sử dụng theo code bên dưới :)

    HTML code:

    <table id="listcheck" border="0">
      <tbody>
        <tr>
          <td><label>
              <input type="checkbox" name="cid[]" value="10" />
              Checkbox 01</label></td>
          <td><label>
              <input type="checkbox" name="cid[]" value="11" />
              Checkbox 02</label></td>
        </tr>
        <tr>
          <td><label>
              <input type="checkbox" name="cid[]" value="27" />
              Checkbox 03</label></td>
          <td><label>
              <input type="checkbox" name="cid[]" value="28" />
              Checkbox 04</label></td>
        </tr>
        <tr>
          <td><label>
              <input type="checkbox" name="cid[]" value="29" />
              Checkbox 05</label></td>
          <td><label>
              <input type="checkbox" name="cid[]" value="12" />
              Checkbox 06</label></td>
        </tr>
          <td><label class="ticky">
              <input type="checkbox" id="checkall" name="checkall" />
              Checkbox select all</label></td>
        </tr>
      </tbody>
    </table>
    

    Jquery code

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function (){
            $("#checkall").click (function () {
                var checkedStatus = this.checked;
                $("#listcheck tbody tr").find(":checkbox").each(function () {
                    $(this).prop("checked", checkedStatus);
                });
            });
        });
    </script>
    
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.