Home > Web Front-end > JS Tutorial > Jquery select all and reverse selection example code_jquery

Jquery select all and reverse selection example code_jquery

WBOY
Release: 2016-05-16 15:31:14
Original
1185 people have browsed it

This article will share with you a piece of code based on jQuery's select all, invert selection and unselect functions, which is suitable for scenarios where batch operations (such as batch deletion, etc.) are required after multiple selections on a web page. The article combines examples, the code is concise, and basically covers all aspects of option selection operations. I hope it can help WEB enthusiasts in need.

//Select all, select none

 $('#checkAll').click(function () {
  //判断是否被选中
  var bischecked = $('#checkAll').is(':checked');
  var fruit = $('input[name="check"]');
  bischecked ? fruit.attr('checked', true) : fruit.attr('checked', false);
 });
Copy after login

//Inverse selection Traverse the checkbox. If it is currently selected, set it to unselected. Otherwise, it is the same

 $("#tabVouchList tr").each(function () {
  if ($("td:eq(0) input[name='check']", $(this)).is(':checked')) {
   $(this).attr('checked', false);
  } else {
   $(this).attr('checked', true);
  }
 });
Copy after login

HTML table

<table id="tabVouchList">
 <tr>
  <th>
   <input type="checkbox" name="checkAll" />
  </th>
  <th>
   行号
  </th>
  <th>
   名称
  </th>
 </tr>
 <tr>
  <td>
   <input type="checkbox" name="check" />
  </td>
  <td>
   行号
  </td>
  <td>
   名称
  </td>
 </tr>
</table>
Copy after login

The above code is all the code for jquery to realize the selection of all and the inverse selection of none. Isn’t the code very simple? I hope it will be helpful to everyone’s work and study.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template