input:checkbox多選框?qū)崿F(xiàn)單選效果跟radio一樣
更新時間：2014年06月16日 17:11:02 投稿：whsnow
checkbox是多選，怎么才能讓他變成單選，效果跟radio一樣呢，本菜鳥就自己寫了個小程序，代碼很簡單
最近遇到一個小小的問題，就是有時候我們使用單選radio的時候，會發(fā)現(xiàn)當我們選中一個之后，再也無法一個都不選了，即選中后沒有取消的功能，此時便想到了功能強大的checkbox，但他是多選，怎么才能讓他變成單選，效果跟radio一樣呢，本菜鳥就自己寫了個小程序，代碼很簡單，只有四行。
廢話不多說，直接代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.8.3.min.js" type="text/javascript" language="javascript"></script>
<title>無標題文檔</title>
<script type="text/javascript">
$(function(){
$(":checkbox").click(function(){
if($(this).attr("checked")!=undefined)
{
$(this).siblings().attr("checked",false);
$(this).attr("checked",true);
}
});
});
</script>
<style>
span,input{float:left;}
input{ width:14px; height:14px;}
span{ margin-right:20px;}
</style>
</head>
<body>
<div>
<input type="checkbox" /><span>1</span>
<input type="checkbox" /><span>2</span>
<input type="checkbox" /><span>3</span>
<input type="checkbox" /><span>4</span>
<input type="checkbox" /><span>5</span>
<input type="checkbox" /><span>6</span>
<input type="text" /><span>7</span>
</div>
</body>
</html>
廢話不多說，直接代碼：
復(fù)制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.8.3.min.js" type="text/javascript" language="javascript"></script>
<title>無標題文檔</title>
<script type="text/javascript">
$(function(){
$(":checkbox").click(function(){
if($(this).attr("checked")!=undefined)
{
$(this).siblings().attr("checked",false);
$(this).attr("checked",true);
}
});
});
</script>
<style>
span,input{float:left;}
input{ width:14px; height:14px;}
span{ margin-right:20px;}
</style>
</head>
<body>
<div>
<input type="checkbox" /><span>1</span>
<input type="checkbox" /><span>2</span>
<input type="checkbox" /><span>3</span>
<input type="checkbox" /><span>4</span>
<input type="checkbox" /><span>5</span>
<input type="checkbox" /><span>6</span>
<input type="text" /><span>7</span>
</div>
</body>
</html>
相關(guān)文章
下面小編就為大家分享一篇解決easyui日期時間框ie的兼容的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
本篇文章主要是對JSON對象與字符串之間的相互轉(zhuǎn)換進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)動態(tài)添加標簽事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
jQuery實現(xiàn)單擊按鈕遮罩彈出對話框效果(1)
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)單擊按鈕遮罩彈出對話框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jQuery dialog 異步調(diào)用ashx,webservice數(shù)據(jù)的代碼
點擊按鈕，在彈出的jQuery.dialog中，顯示異步返回的數(shù)據(jù)。WebService可以寫復(fù)雜的函數(shù)，ashx可以根據(jù)傳過來的參數(shù)調(diào)用不同的方法，達到同樣的效果。2010-08-08
這篇文章主要介紹了詳解閉包解決jQuery中AJAX的外部變量問題的相關(guān)資料,需要的朋友可以參考下2017-02-02
JQuery Ajax執(zhí)行跨域請求數(shù)據(jù)的解決方案
今天小編就為大家分享一篇關(guān)于JQuery Ajax執(zhí)行跨域請求數(shù)據(jù)的解決方案，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2018-12-12
本文主要總結(jié)了jQuery中的一些小技巧。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
jQuery 函數(shù)實例分析【函數(shù)聲明、函數(shù)表達式、匿名函數(shù)等】
這篇文章主要介紹了jQuery 函數(shù),結(jié)合實例形式分析了jquery函數(shù)聲明、函數(shù)表達式、匿名函數(shù)等相關(guān)使用技巧,需要的朋友可以參考下2020-05-05
jquery tagname 獲得方法2009-06-06