模擬美化checkbox核取方塊程式碼例項

admin發表於2017-04-07

本章節通過程式碼例項介紹一下如何模擬實現checkbox核取方塊效果。

由於自帶的核取方塊功能實在是不夠美觀，下面就通過程式碼例項介紹一下。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.checkbox{
  width:15px;
  height:15px;
  display:block;
  float:none;
  border:1px solid #DBDBDB;
  background:#F5F7F9;
  cursor:pointer;
  position:absolute;
  top:0;
  left:0;
}
.checkbox-con .cur{
  border:none;
  width:17px;
  height:17px;
  background:url(mytest/jQuery/gou.png) no-repeat;
}
.checkbox-con span{
  display:inline-block;
  position:relative;
  padding-left:20px;
  margin-right:10px;
}
.checkbox-con .ipt-hide{
  position:absolute;
  width:0;
  height:0;
  border:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  $('.checkbox').on('click',function(){
    if($(this).siblings("input[type='checkbox']").is(':checked')){
      $(this).removeClass('cur');
      $(this).siblings("input[type='checkbox']").removeProp('checked')
    }
    else{
      $(this).addClass('cur');
      $(this).siblings("input[type='checkbox']").prop('checked','checked')
    }
  });
});
</script>
</head>
<body>
<div class="checkbox-con">
  <span>
    <input type="checkbox"  class="ipt-hide">
    <label class="checkbox"></label>螞蟻部落一
  </span>
  <span>
    <input type="checkbox"  class="ipt-hide">
    <label class="checkbox"></label>螞蟻部落二
  </span>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$('.checkbox').on('click',function(){})，為class屬性值為checkbox的元素註冊click事件處理函式。

（3）.if($(this).siblings("input[type='checkbox']").is(':checked')){

  $(this).removeClass('cur');

  $(this).siblings("input[type='checkbox']").removeProp('checked')

}，判斷核取方塊是否被選中。

如果被選中則刪除label標籤的cur樣式類，這樣的話就沒有勾號圖片背景了。

（4）.else{

  $(this).addClass('cur');

  $(this).siblings("input[type='checkbox']").prop('checked','checked')

}，否則的話就是新增cur樣式類，並將核取方塊選中。

二.相關閱讀:

（1）.on()可以參閱jquery on()一章節。

（2）.siblings()可以參閱jQuery siblings()一章節。

（3）.input[type='checkbox']可以參閱jQuery [attribute=value]一章節。

（4）.is()方法可以參閱jQuery is()一章節。

（5）.:checked可以參閱jQuery :checked一章節。

（6）.removeProp()可以參閱jQuery removeProp()一章節。

相關文章