> 웹 프론트엔드 > JS 튜토리얼 > Jquery는 모두 선택 및 역방향 선택 예제 code_jquery

Jquery는 모두 선택 및 역방향 선택 예제 code_jquery

WBOY
풀어 주다: 2016-05-16 15:31:14
원래의
1177명이 탐색했습니다.

이 기사에서는 웹에서 여러 항목을 선택한 후 일괄 작업(예: 일괄 삭제 등)이 필요한 시나리오에 적합한 jQuery의 모두 선택, 선택 반전 및 선택 취소 기능을 기반으로 한 코드 조각을 공유합니다. 페이지. 이 기사는 예제를 결합하고 코드가 간결하며 기본적으로 옵션 선택 작업의 모든 측면을 다루고 있어 도움이 필요한 WEB 매니아에게 도움이 되기를 바랍니다.

//모두 선택, 없음 선택

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

//역선택 체크박스를 순회합니다. 현재 선택되어 있으면 선택 해제로 설정합니다.

 $("#tabVouchList tr").each(function () {
  if ($("td:eq(0) input[name='check']", $(this)).is(':checked')) {
   $(this).attr('checked', false);
  } else {
   $(this).attr('checked', true);
  }
 });
로그인 후 복사

HTML 테이블

<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>
로그인 후 복사

위 코드는 모두 선택과 없음 역선택을 구현하는 jquery의 코드입니다. 코드가 매우 간단하지 않나요?

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿