javascript implements checkbox check box instance code

  • 2020-12-05 17:05:36
  • OfStack

This article introduces the javascript implementation of checkbox check box example code and checkbox check box beautification operation, shared for your reference, the specific content is as follows

1. checkbox check box for beautification operation

Check box default appearance of beauty is not satisfactory, can meet the requirements of the beauty of the page is not high, but if the requirements for the page is more refined, it may be too reluctant, the following is a section of the check box to beautify the code example, I hope to give you a definite help.
Code examples are as follows:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>checkbox Check box </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"> The home of the script 1</label>
 <input id="CheckBox2" type="checkbox" class="CheckBoxClass"/>
 <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass"> The home of the script 2</label>
</div>
</body>
</html>

2. checkbox check box selects all and unselects all instance code
It is very common to select all and none of the check boxes. This section shares 1 code example, which can realize various check and deselect functions.
Code examples are as follows:


<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title> The home of the script </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"," The selected ");  
  }
  else
  {  
   $("input[name='checkbox']").each(function(){this.checked=false;});  
   $("#btn1").attr("value"," Future generations "); 
  }  
 }); 
 
 $("#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=" Future generations ">
  <input type="button" id="cancel" value=" To cancel all ">
  <input type="button" id="jishu" value=" I'm gonna select all the odd numbers ">
  <input type="button" id="fanxuan" value=" The selected ">
  <input type="button" id="get" value=" Gets all the selected values ">
  <br>
  <input type="checkbox" name="checkbox" value=" The home of the script 1">
   The home of the script 1
  <input type="checkbox" name="checkbox" value=" The home of the script 2">
   The home of the script 2
  <input type="checkbox" name="checkbox" value=" The home of the script 3">
   The home of the script 3
  <input type="checkbox" name="checkbox" value=" The home of the script 4">
   The home of the script 4
  <input type="checkbox" name="checkbox" value=" The home of the script 5">
   The home of the script 5
  <input type="checkbox" name="checkbox" value=" The home of the script 6">
   The home of the script 6
  <input type="checkbox" name="checkbox" value=" The home of the script 7">
   The home of the script 7
  <input type="checkbox" name="checkbox" value=" The home of the script 8">
   The home of the script 8
 </form>
</body>
</html> 

That's all about the checkbox check box, and I hope you found it helpful.


Related articles: