Home >Web Front-end >JS Tutorial >Javascript implementation of checkbox check box example code_javascript skills

Javascript implementation of checkbox check box example code_javascript skills

WBOYOriginal: 2016-05-16 15:20:311653browse

This article introduces the example code of javascript to implement checkbox and beautify the checkbox. It is shared with everyone for your reference. The specific content is as follows

1. Checkbox for beautification operation

The default appearance of the check box is not satisfactory and can satisfy pages with low aesthetic requirements. However, if the page requirements are more refined, it may be too reluctant. Here is a code example to beautify the check box. , I hope it can bring some help to everyone.
The code example is as follows:

<!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. Example code for selecting and deselecting all checkboxes
Selecting and unselecting all check boxes is a very common operation. This chapter shares a code example that can implement multiple selection and deselection functions.
The code example is as follows:

<!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>

The above is all about the checkbox. I hope it will be helpful to everyone's study.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Adjusting the top and bottom order of table rows tr implemented by jQuery_jqueryNext article：Adjusting the top and bottom order of table rows tr implemented by jQuery_jquery

See more

Javascript implementation of checkbox check box example code_javascript skills

Related articles