input:checkbox多選框?qū)崿F(xiàn)單選效果跟radio一樣
更新時間：2014年06月16日 17:11:02 投稿：whsnow
checkbox是多選，怎么才能讓他變成單選，效果跟radio一樣呢，本菜鳥就自己寫了個小程序，代碼很簡單
最近遇到一個小小的問題，就是有時候我們使用單選radio的時候，會發(fā)現(xiàn)當(dāng)我們選中一個之后，再也無法一個都不選了，即選中后沒有取消的功能，此時便想到了功能強(qiáng)大的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>無標(biāo)題文檔</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>無標(biāo)題文檔</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)文章
每天都在與DOM打交道而且暈頭轉(zhuǎn)向，不過，自打咱認(rèn)識了jQuery： 是操作屬性也不煩了，插入新元素也不暈了，連移動元素及包裝元素咱也不抽筋了。。2010-01-01
jquery validation插件表單驗(yàn)證的一個例子
jquery.validate.js validation表單的驗(yàn)證插件2010-03-03
本篇文章，小編為大家介紹關(guān)于jQuery實(shí)用基礎(chǔ)超詳細(xì)介紹，有需要的朋友可以參考一下2013-04-04
jquery實(shí)現(xiàn)平滑的二級下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)平滑的二級下拉菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過彈出二級下拉菜單,涉及jquery鼠標(biāo)hover事件及fadeIn與fadeOut事件操作頁面元素隱藏及顯示的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08
$號是jQuery“類”的一個別稱，$()構(gòu)造了一個jQuery對象。所以，“$()”可以叫做jQuery的構(gòu)造函數(shù)（個人觀點(diǎn)，呵呵?。?/div> 2009-12-12
jquery bankInput插件是銀行卡進(jìn)行格式化顯示，能控制文本框輸入最小最大個數(shù)、控制只能輸入數(shù)字、控制不能粘貼不能使用輸入法。同時插件能實(shí)現(xiàn)自動加載格式化顯示和支持非輸入框的格式話顯示2012-08-08
用簡潔的jQuery方法toggleClass實(shí)現(xiàn)隔行換色
這篇文章主要介紹了用簡潔的jQuery方法toggleClass實(shí)現(xiàn)隔行換色，很簡單，但很實(shí)用，需要的朋友可以看看2014-10-10
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。這篇文章主要介紹了基于jQuery的ajax方法封裝的相關(guān)資料,需要的朋友可以參考下2016-07-07
在很多時候，JQuery的$()函數(shù)都返回一個類似數(shù)據(jù)的JQuery對象，例如$(‘div’)將返回div里面的所有div元素包裝的JQuery對象。在這種情況下，JQuery提供了幾個常用的屬性和方法來操作JQuery對象。本文將對此進(jìn)行介紹，下面跟著小編一起來看下吧2016-12-12
JQuery 動態(tài)生成Table表格實(shí)例代碼
這篇文章主要介紹了JQuery 動態(tài)生成Table表格實(shí)例代碼的相關(guān)資料,這里附有實(shí)現(xiàn)實(shí)例代碼，具有一定的參考價值，需要的朋友可以參考下2016-12-12最新評論