Dùng Jquery để Bắt Sự Kiện Cho Checkbox Trong Form

Trang chủ » Sự Kiện Checkbox Trong Jquery » Dùng Jquery để Bắt Sự Kiện Cho Checkbox Trong Form

Có thể bạn quan tâm

Dùng Jquery để bắt sự kiện cho Checkbox trong Form

Xem Demo tại đây

Trong bài viết này tôi sẽ hướng dẫn cách để bắt sự kiện click vào checkbox.

Tôi có một form như thế này

Dùng Jquery để bắt sự kiện cho Checkbox trong Form

Trong Form có một số checkbox, hàng INTERREST có 3 checkbox, đầu là All và hàng LANGUAGE và CARS cũng vậy.

Yêu cầu:

  • Nhấn chọn/bỏ chọn All thì tất cả các checkbox con trong hàng sẽ đều chọn/bỏ chọn
  • Trong hàng khi đang chọn tất cả, nhấn bỏ chọn con thì checkbox All sẽ bỏ chọn
  • Nếu tất cả con trong hàng đều chọn thì checkbox all sẽ chọn luôn

HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dùng Jquery bắt sự kiện cho Checkbox</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <div class="container"> <h1>Dùng Jquery bắt sự kiện cho Checkbox</h1> <form action=""> <fieldset> <div class="row"> <div class="col-title"> <p class="title">Interest</p> </div> <div class="col-action"> <ul> <li> <label> <input type="checkbox" value="all" name="interest[]"> <span>All</span> </label> </li> <li> <label> <input type="checkbox" value="music" name="interest[]"> <span>Music</span> </label> </li> <li> <label> <input type="checkbox" value="coffee" name="interest[]"> <span>Coffee</span> </label> </li> </ul> </div> </div> <div class="row"> <div class="col-title"> <p class="title">Language</p> </div> <div class="col-action"> <ul> <li> <label> <input type="checkbox" value="all" name="language[]"> <span>All</span> </label> </li> <li> <label> <input type="checkbox" value="vietnamese" name="language[]"> <span>Vietnamese</span> </label> </li> <li> <label> <input type="checkbox" value="engish" name="language[]"> <span>English</span> </label> </li> <li> <label> <input type="checkbox" value="japanese" name="language[]"> <span>Japanese</span> </label> </li> <li> <label> <input type="checkbox" value="korean" name="language[]"> <span>Korean</span> </label> </li> </ul> </div> </div> <div class="row"> <div class="col-title"> <p class="title">Cars</p> </div> <div class="col-action"> <ul> <li> <label> <input type="checkbox" value="all" name="national[]"> <span>All</span> </label> </li> <li> <label> <input type="checkbox" value="honda" name="national[]"> <span>Honda</span> </label> </li> <li> <label> <input type="checkbox" value="mercedes" name="national[]"> <span>Mercedes</span> </label> </li> <li> <label> <input type="checkbox" value="audi" name="national[]"> <span>Audi</span> </label> </li> </ul> </div> </div> </fieldset> </form> </div> </body> </html>

CSS:

Bạn dán trong tag <head></head> để chạy

<style> *{ box-sizing: border-box; } body { font-family:'Roboto'; font-size: 16px; } .row { display: flex; flex-wrap: wrap; } .col-title { flex-basis: 20%; } .col-title p{ font-weight: 700; text-transform: uppercase; } .col-action { flex: 1; } ul { display: flex; flex-wrap: wrap; list-style: none; } ul li { width: 20%; } ul li label:hover { cursor: pointer; } ul li label input { display: none; } ul li label input:checked + span::before { background: #037EC8 url(https://huynhthaihung.com/demo/checkbox/images/ico-checked.png) center center/70% auto no-repeat; border: solid 1px #037EC8; } ul li label span::before { content: ''; display: inline-block; width: 16px; height: 16px; border: solid 1px #c2c2c2; background: #FFF; border-radius: 4px; margin-right: 10px; vertical-align: middle; } fieldset { border: none; padding: 0; } .container { max-width: 800px; margin: auto; } </style>

Javascript:

Bạn dán code dưới vào trước tag </body>

<script> $(document).ready(function() { $('input[type="checkbox"]').change(function() { var $this = $(this); // console.log("this", $this.val() ); if($this.val() == "all" ) { var $name = $this.attr("name"); if( $this.is(":checked") ) { $('input[name="'+ $name +'"]').each(function (i) { if( i>0 ) { $(this).prop('checked', true); } }) } else { $('input[name="'+ $name +'"]').each(function (i) { if( i>0 ) { $(this).prop('checked', false); } }) } } else { // click no choose var $name = $this.attr("name"); if( $this.is(":checked") == false ) { $('input[name="'+ $name +'"]').each(function (i) { if( $(this).val() == "all" ) { $(this).prop('checked', false); } }) } // click choose else { var $i = 0; var $checked = 0; $('input[name="'+ $name +'"]').each(function (i) { $i++; if( $(this).val() != "all" ) { if( $(this).is(":checked")) { $checked++; } } }) // console.log("i", $i ) // console.log("checked", $checked ) if( $checked == $i - 1 ) { $('input[name="'+ $name +'"][value="all"]').prop('checked', true); } } } }); }) </script>

Để bắt sự kiện click của checkbox ta dùng:

.change()

Để kiểm tra trạng thái của checkbox ta dùng:

.is(“:checked”)

Để auto check checkbox ta dùng:

.prop(‘checked’, false);

Để auto bỏ check checkbox ta dùng:

.prop(‘checked’, true);

Từ khóa » Sự Kiện Checkbox Trong Jquery