집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript에서 '모두 선택' 및 '선택 안 함' 기능을 구현하는 방법은 무엇입니까? (코드 예)

JavaScript에서 '모두 선택' 및 '선택 안 함' 기능을 구현하는 방법은 무엇입니까? (코드 예)

青灯夜游원래의: 2020-06-16 10:27:323705검색

이 글에서는 JavaScript를 사용하여 "모두 선택" 및 "모두 선택 해제" 기능을 구현하는 방법을 샘플 코드를 통해 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

코드는 다음과 같습니다

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script>

  function clickon() {
    // 获取到body中所有checkbox
    var checkbox = document.querySelectorAll("input[type=&#39;checkbox&#39;]");

    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked = true;
    }
  }

  function unclick() {
    var checkbox = document.querySelectorAll("input[type=&#39;checkbox&#39;]");

    for (var i = 0; i < checkbox.length; i++) {
      checkbox[i].checked = false;
    }
  }

</script>
<body>

<form>
  <input type="checkbox">吃
  <input type="checkbox">喝
  <input type="checkbox">拉
  <input type="checkbox">撒
  <input type="button" value="全选" onclick="clickon()">
  <input type="button" value="全不选" onclick="unclick()">
</form>

</body>
</html>

Effect

더 많은 jQuery 및 Javascript 특수 효과를 보려면 js 특수 효과 컬렉션을 방문하는 것이 좋습니다!

위 내용은 JavaScript에서 '모두 선택' 및 '선택 안 함' 기능을 구현하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JS는 마우스를 따라가는 아름다운 색상 버블 효과를 구현합니다(코드 첨부).다음 기사：JS는 마우스를 따라가는 아름다운 색상 버블 효과를 구현합니다(코드 첨부).