체크박스 체크박스 예제 code_javascript 기술의 Javascript 구현-JS 튜토리얼-php.cn

체크박스 체크박스 예제 code_javascript 기술의 Javascript 구현

WBOY

풀어 주다： 2016-05-16 15:20:31

원래의

1650명이 탐색했습니다.

본 글은 체크박스를 구현하고 체크박스를 아름답게 하기 위한 자바스크립트의 예제 코드를 소개하고 있으며, 참고용으로 공유합니다

1. 미화 작업 체크박스

체크박스의 기본 모양은 만족스럽지 않으며 미적 요구 사항이 낮은 페이지를 만족시킬 수 있습니다. 그러나 페이지 요구 사항이 더 세련되면 체크박스를 아름답게 하기 위한 코드 예제가 있습니다. 모든 사람에게 도움이 될 수 있기를 바랍니다.
코드 예시는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>checkbox复选框</title>
<style type="text/css">
.CheckBoxClass{display:none;}
.CheckBoxLabelClass{
 background:url("mytest/jQuery/UnCheck.png") no-repeat;
 padding-left:30px;
 padding-top:3px;
 margin:5px;
 height:28px;
 width:150px;
 display:block;
}
.CheckBoxLabelClass:hover{text-decoration:underline;}
.LabelSelected{background:url("mytest/jQuery/Check.png") no-repeat;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".CheckBoxClass").change(function(){
  if($(this).is(":checked")){
   $(this).next("label").addClass("LabelSelected");
  }
  else{
   $(this).next("label").removeClass("LabelSelected");
  }
 });
})
</script>
</head>
<body>
<div>
 <input id="CheckBox1" type="checkbox" class="CheckBoxClass"/>
 <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">脚本之家一</label>
 <input id="CheckBox2" type="checkbox" class="CheckBoxClass"/>
 <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">脚本之家二</label>
</div>
</body>
</html>

로그인 후 복사

2. 모든 체크박스를 선택 및 선택 해제하는 예제 코드
모든 확인란을 선택하고 선택 취소하는 것은 매우 일반적인 작업입니다. 이 장에서는 여러 선택 및 선택 취소 기능을 구현할 수 있는 코드 예제를 공유합니다.
코드 예시는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript">
$("document").ready(function(){
 $("#all").click(function(){  
  if(this.checked)
  {  
   $("input[name='checkbox']").each(function(){this.checked=true;});
   $("#btn1").attr("value","反选");  
  }
  else
  {  
   $("input[name='checkbox']").each(function(){this.checked=false;});  
   $("#btn1").attr("value","全选"); 
  }  
 }); 
 
 $("#btn1").click(function(){
  $("[name='checkbox']").attr("checked",'true');
 })
  
 $("#cancel").click(function(){
  $("[name='checkbox']").removeAttr("checked");
 })
  
 $("#jishu").click(function(){
  $("[name='checkbox']:even").attr("checked",'true');
 })
  
 $("#fanxuan").click(function(){
  $("[name='checkbox']").each(function(){
   if($(this).attr("checked"))
   {
    $(this).removeAttr("checked");
   }
   else
   {
    $(this).attr("checked",'true');
   }
  })
 })
 $("#get").click(function(){
  var str="";
  $("[name='checkbox'][checked]").each(function(){
   str+=$(this).val()+"/r/n";
  })
  alert(str);
 })
})
 </script>
 </head>
 <body>
 <form name="form1" method="post" action="">
  <input type="checkbox" id="all" name="all">
  <input type="button" id="btn1" value="全选">
  <input type="button" id="cancel" value="取消全选">
  <input type="button" id="jishu" value="选中所有奇数">
  <input type="button" id="fanxuan" value="反选">
  <input type="button" id="get" value="获得选中的所有值">
  <br>
  <input type="checkbox" name="checkbox" value="脚本之家一">
  脚本之家一
  <input type="checkbox" name="checkbox" value="脚本之家二">
  脚本之家二
  <input type="checkbox" name="checkbox" value="脚本之家三">
  脚本之家三
  <input type="checkbox" name="checkbox" value="脚本之家四">
  脚本之家四
  <input type="checkbox" name="checkbox" value="脚本之家五">
  脚本之家五
  <input type="checkbox" name="checkbox" value="脚本之家六">
  脚本之家六
  <input type="checkbox" name="checkbox" value="脚本之家七">
  脚本之家七
  <input type="checkbox" name="checkbox" value="脚本之家八">
  脚本之家八
 </form>
</body>
</html>

로그인 후 복사

위 내용은 모두 체크박스에 관한 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.