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