VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

jQuery Tuts

jQuery là gì? Show / hide content in JQuery Checked, unchecked all checkbox in jQuery Validate form in jQuery

Checked, unchecked all checkbox in jQuery


Hàm show()
Hàm hide()  

Mô tả bài toán: đây là một ví về checked, unchecked all checkbox. Trong ví dụ dưới đây khi bạn check/uncheck checkbox "all" thì các hạng mục trong group sẽ bị check/uncheck theo checkbox "all". Ngoại trừ các checkbox bị disable.

checked unchecked all checkbox in jquery

Nội dung chính

  • Sử dụng javascript
  • Sử dụng jQuery

Sử dụng javascript

Dưới đây là ví dụ sử dụng javascript.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>

  // checked/unchecek all (javascript)
  function checkAll(baseId, itemId) {
    var baseCheck = document.getElementById(baseId).checked;
    var item = document.getElementById(itemId + '1');
    var i = 1;
    
    while (item != null) {
      if (item.disabled == false) {
        item.checked = baseCheck;
      }
      i = i + 1;
      item = document.getElementById(itemId + i);
    }
  }
  
</script>
</head>
<body>
  Group1: 
  All<input type="checkbox" id="group1" name="group1" 
    onclick="checkAll('group1', 'item1');"/>
  Item1<input type="checkbox" id="item11" name="item11"/>
  Item2<input type="checkbox" id="item12" name="item12"/>
  Item3<input type="checkbox" id="item13" name="item13" disabled="true"/>
  Item4<input type="checkbox" id="item14" name="item14" disabled="true"/>
  <br>
  Group2: 
  All<input type="checkbox" id="group2" name="group2" 
    onclick="checkAll('group2', 'item2');" />
  Item1<input type="checkbox" id="item21" name="item21"/>
  Item2<input type="checkbox" id="item22" name="item22"/>
  Item3<input type="checkbox" id="item23" name="item23"/>
  Item4<input type="checkbox" id="item24" name="item24"/>
  <br>
  Group3: 
  All<input type="checkbox" id="group3" name="group3" 
    onclick="checkAll('group3', 'item3');"/>
  Item1<input type="checkbox" id="item31" name="item31"/>
  Item2<input type="checkbox" id="item32" name="item32"/>
  Item3<input type="checkbox" id="item33" name="item33"/>
  Item4<input type="checkbox" id="item34" name="item34"/>
  <br>
</body>
</html>

Kết quả:



Sử dụng jQuery

Trong ví dụ này, chúng ta sử dụng hàm each() trong jQuery để duyệt một nhóm các phần tử checkbox, rồi check xem checkbox đang duyệt không bị disable thì check/uncheck.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
   
  // checked/unchecked all (jquery)
  function checkAllJquery(baseId, itemClass) {
    var baseCheck = $('#' + baseId).is(":checked");
    $('.' + itemClass).each(function() {
      if (!$(this).is(':disabled')) {
        $(this).prop('checked', baseCheck);
      }
    });
  }
   
</script>
</head>
<body>
  Group1: 
  All<input type="checkbox" id="group1" name="group1"
    onclick="checkAllJquery('group1', 'item1');"/>
  Item1<input type="checkbox" class="item1" name="item11"/>
  Item2<input type="checkbox" class="item1" name="item12"/>
  Item3<input type="checkbox" class="item1" name="item13" disabled="true"/>
  Item4<input type="checkbox" class="item1" name="item14" disabled="true"/>
  <br>
  Group2: 
  All<input type="checkbox" id="group2" name="group2"
    onclick="checkAllJquery('group2', 'item2');" />
  Item1<input type="checkbox" class="item2" name="item21"/>
  Item2<input type="checkbox" class="item2" name="item22"/>
  Item3<input type="checkbox" class="item2" name="item23"/>
  Item4<input type="checkbox" class="item2" name="item24"/>
  <br>
  Group3: 
  All<input type="checkbox" id="group3" name="group3"
    onclick="checkAllJquery('group3', 'item3');"/>
  Item1<input type="checkbox" class="item3" name="item31"/>
  Item2<input type="checkbox" class="item3" name="item32"/>
  Item3<input type="checkbox" class="item3" name="item33"/>
  Item4<input type="checkbox" class="item3" name="item34"/>
  <br>
</body>
</html>

Kết quả:


Hàm show()
Hàm hide()  

Recent Updates

Inject JQuery trong Selenium WebDriverJQuery là gì?Checked, unchecked all checkbox in jQueryShow hide content in jQueryXử lý duplicate trong SQLPhím tắt hay dùng trong ExcelBảo mật tập tin ExcelDịch trang tính trong ExcelIn trang tính trong ExcelHàm VLOOKUP trong ExcelĐối tượng đồ họa trong ExcelSử dụng macro trong ExcelSử dụng Templates trong ExcelSử dụng chủ đề (theme) trong ExcelSử dụng Style trong ExcelXác thực dữ liệu (Data Validation) trong Excel

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn

Danh sách bài học

Học java
Học servlet
Học jsp
Học Hibernate
Học Struts2
Học Spring
Học SQL

Câu hỏi phỏng vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

About VietTuts.Vn

Hệ thống bài học trên VietTuts.Vn bao gồm các bài lý thuyết và thực hành về các công nghệ java và công nghệ web. Các bài lý thuyết trên hệ thống VietTuts.Vn được tham khảo và tổng hợp từ các trang http://javatpoint.com, http://www.tutorialspoint.com, http://docs.oracle.com/en …

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | VietTuts.Vn team | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml