checbox核取方塊實現radio單選框的單選功能

admin發表於2017-11-22

核取方塊可以選中多個，單選按鈕只能夠選中一個。

下面分享一個使用核取方塊模擬單選按鈕的效果，也就是核取方塊只能有一個同時被選中。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
span, input{
  float:left;
}
input{
  width:14px;
  height:14px;
}
span{
  margin-right:20px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
<script> 
$(function(){ 
  $(":checkbox").click(function(){ 
    if($(this).attr("checked")!=undefined){ 
      $(this).siblings().attr("checked",false); 
    } 
  }) 
}) 
</script>
</head>
<body>
<div>
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
  <input type="checkbox" />
</div>
</body>
</html>

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

一.程式碼註釋:

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

（2）.$(":checkbox").click(function(){})，為checkbox核取方塊註冊click事件處理函式。

（3）.if($(this).attr("checked")!=undefined){}，判斷當前核取方塊是否被選中，因為如果核取方塊沒有被選中attr()函式的返回值是undefined，如果選中的話返回值checked。

（4）.$(this).siblings().attr("checked",false)，如果當前核取方塊被選中，那麼其兄弟核取方塊全部取消選中。

二.相關閱讀:

（1）.attr()參閱jQuery attr()一章節。 

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

相關文章