JS는 CheckBox 체크박스 선택, 선택 없음 또는 선택 없음 function_javascript 기술을 구현합니다.

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

CheckBox JS는 전체선택, 전체선택 안함 기능을 구현하고 있습니다. 구체적인 내용은 다음과 같습니다

.

사물:

• 1. 요소 가져오기
• 2. 모두 선택, 선택 취소, 선택 반전 및 클릭 이벤트 추가
• 3. for 루프 체크박스 사용
• 4. 체크박스를 true로 설정하면 모두 선택됩니다.
• 5. 선택을 취소하려면 확인란을 false로 설정하세요.
• 6. if 판단을 통해 체크하면 false로 설정하고, 체크하면 false로 설정합니다.
  

html 코드:

 <input type="button" value="全选" id="sele"/>
  <input type="button" value="不选" id="setinterval"/>
  <input type="button" value="反选" id="clear"/>
   <div id="checkboxs">
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
    <input type="checkbox"/><br />
</div>

js 코드:

<script>
window.onload=function(){

var sele=document.getElementById('sele');//获取全选
var unsele=document.getElementById('setinterval');//获取不选
var clear=document.getElementById('clear');//获取反选
var checkbox=document.getElementById('checkboxs');//获取div
var checked=checkbox.getElementsByTagName('input');//获取div下的input
//全选
sele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=true
}
}

//不选
unsele.onclick=function(){
for(i=0;i<checked.length;i++){
checked[i].checked=false
}
}
//反选
clear.onclick=function(){
for(i=0;i<checked.length;i++){
if(checked[i].checked==true){
checked[i].checked=false
}
else{
checked[i].checked=true
}
}
}



}
</script>

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