VietTuts

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

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • Python
  • PHP
  • Eclipse
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Phần mềm tiện ích
    • Cấu trúc dữ liệu và giải thuật
    • Học lập trình C#
    • 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 jQueryDãy số Fibonacci trong C#Bài tập C# có lời giảiToán tử dấu 2 chấm (::) trong Java 8Lambda Expression - Biểu thức Lambda trong java 8HttpClient trong Angular 7Service trong Angular7Routing trong Angular 7Pipe trong Angular 7Directive trong Angular 7Template trong Angular 7Event Binding trong Angular 7Module trong Angular 7

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