>웹 프론트엔드 >JS 튜토리얼 >JS는 CheckBox 체크박스를 구현하여 function_javascript 기술을 모두 선택하고 선택하지 않습니다.

JS는 CheckBox 체크박스를 구현하여 function_javascript 기술을 모두 선택하고 선택하지 않습니다.

WBOY
WBOY원래의
2016-05-16 16:00:501427검색

CheckBox 컨트롤은 일반적으로 옵션을 켜거나 끄는 데 사용되는 체크박스라고 합니다. 이 컨트롤은 대부분의 응용 프로그램의 설정 대화 상자에 있습니다. 확인할 수 있는 것은 CheckBox입니다.

이 컨트롤은 특정 상태(예: 옵션)가 선택되었는지(켜짐, 값 1) 또는 지워졌는지(꺼짐, 값 0)를 나타냅니다. 애플리케이션에서 이 컨트롤을 사용하여 사용자에게 "True/False" 또는 "yes/no" 선택을 제공합니다. CheckBox는 서로 독립적으로 작동하므로 사용자는 여러 CheckBox를 동시에 선택하여 옵션을 결합할 수 있습니다.

CheckBox JS는 모두 선택 및 모두 선택 취소 기능을 구현합니다. 간단한 js 함수만 삽입하면 됩니다. . .

<script language="javascript">
 function  cli(Obj)
 {
 var collid = document.getElementByIdx_x("all")
 var coll = document.getElementsByName(Obj)
 if (collid.checked){
   for(var i = 0; i < coll.length; i++)
    coll[i].checked = true;
 }else{
   for(var i = 0; i < coll.length; i++)
    coll[i].checked = false;
 }
 }
 </script>

다음은 CheckBox 체크박스 HTML 코드 세트입니다
<input name='多选项名称' type='checkbox' value='' id="all" onclick="cli('多选项名称');"> 全选
<input name='多选项名称' type='checkbox' value='' > A
<input name='多选项名称' type='checkbox' value='' > B
<input name='多选项名称' type='checkbox' value='' > C
<input name='多选项名称' type='checkbox' value='' > D
<input name='多选项名称' type='checkbox' value='' > E
<input name='多选项名称' type='checkbox' value='' > F

자, 위의 코드를 복사하여 수정하고 테스트해 보세요. . .

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.