js html css實(shí)現(xiàn)復(fù)選框全選與反選
本文實(shí)例為大家分享了js復(fù)選框全選與反選實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
<html>
<head>
<title>html+css+js實(shí)現(xiàn)復(fù)選框全選與反選</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="js,筆試題目" />
<style type="text/css">
table,tr,td
{
border:1px solid red;
}
</style>
<script type="text/javascript">
function quanxuan()
{
for(var i=1;i<=3;i++)
{
var cbox_id="cb"+i;
var cbox=document.getElementById(cbox_id);
//alert(cbox.value);
if(document.getElementById("cb_quanxuan").checked)
cbox.checked=true;
else
cbox.checked=false;;
}
}
function fanxuan()
{
for(var i=1;i<=3;i++)
{
var cbox_id="cb"+i;
var cbox=document.getElementById(cbox_id);
if(document.getElementById("cb_fanxuan").checked)
{//選中反選框
if(cbox.checked)
cbox.checked=false;
else
cbox.checked=true;
}
else
{
if(cbox.checked)
cbox.checked=false;
else
cbox.checked=true;
}
}
}
</script>
</head>
<body>
<form id="form1">
<table>
<tr>
<td><input type="checkbox" id="cb_quanxuan" onclick="quanxuan()" />全選</td>
<td>復(fù)選框全選案例</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb1" value="1" />1</td>
<td>我是傻逼1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb2" value="2" />2</td>
<td>我是傻逼2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb3" value="3" />3</td>
<td>我是傻逼3</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><input type="checkbox" id="cb_fanxuan" onclick="fanxuan()" />反選</td>
<td>反選案例</td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)checkbox全選和反選示例
- js實(shí)現(xiàn)checkbox全選、不選與反選的方法
- JS實(shí)現(xiàn)的全選、全不選及反選功能【案例】
- AngularJS實(shí)現(xiàn)全選反選功能
- javaScript checkbox 全選/反選及批量刪除
- 利用Vue.js實(shí)現(xiàn)checkbox的全選反選效果
- 兼容ie和firefox版本的js反選 全選 多選框
- javascript實(shí)現(xiàn)簡(jiǎn)單的全選和反選功能
- javaScript實(shí)現(xiàn)復(fù)選框全選反選事件詳解
- JavaScript實(shí)現(xiàn)頁(yè)面一鍵全選或反選
相關(guān)文章
JSON在Javascript中的使用(eval和JSON.parse的區(qū)別)詳細(xì)解析
這篇文章主要介紹了JSON在Javascript中的使用以及eval和JSON.parse的區(qū)別詳細(xì)解析,本文對(duì)eval()和JSON.parse()的區(qū)別介紹的非常詳細(xì),需要的朋友可以參考下2017-09-09
JS對(duì)select控件option選項(xiàng)的增刪改查示例代碼
Javascript操作select是表單中比較常見的,大家可以在網(wǎng)上搜索到很多的相關(guān)資料,接下來(lái)為大家詳細(xì)介紹下,JS動(dòng)態(tài)操作select中的各種方法,感興趣的朋友可以參考下2013-10-10
微信小程序云開發(fā)實(shí)現(xiàn)微信支付功能業(yè)務(wù)邏輯可靠
這篇文章主要介紹了微信小程序云開發(fā)實(shí)現(xiàn)微信支付功能,云開發(fā)來(lái)開發(fā)微信小程序時(shí),如何實(shí)現(xiàn)微信支付,并且保證業(yè)務(wù)邏輯可靠,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2022-05-05
分享一個(gè)自定義的console類 讓你不再糾結(jié)JS中的調(diào)試代碼的兼容
在寫JS的過(guò)程中,為了調(diào)試我們常常會(huì)寫很多 console.log、console.info、console.group、console.warn、console.error代碼來(lái)查看JS的運(yùn)行情況,但發(fā)布時(shí)又因?yàn)镮E不支持console,又要去掉這些代碼,一不小心就會(huì)出錯(cuò)2012-04-04
微信小程序判斷用戶是否需要再次授權(quán)獲取個(gè)人信息
這篇文章主要介紹了微信小程序判斷用戶是否需要再次授權(quán)獲取個(gè)人信息,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
使用 JScript 創(chuàng)建 .exe 或 .dll 文件的方法
JScript 是由微軟開發(fā)的活動(dòng)腳本語(yǔ)言,基于 ECMAScript 規(guī)范實(shí)現(xiàn)。Internet Explorer 中的 JavaScript,實(shí)際上是指 JScript。2011-07-07
Bootstrap 網(wǎng)站實(shí)例之單頁(yè)營(yíng)銷網(wǎng)站
這篇文章主要介紹了Bootstrap 網(wǎng)站實(shí)例之單頁(yè)營(yíng)銷網(wǎng)站的相關(guān)資料,本文給大家介紹的非常詳細(xì)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10
uniapp中微信小程序與H5相互跳轉(zhuǎn)以及傳參詳解(webview)
在單位做項(xiàng)目的時(shí)候碰到一個(gè)需求,需要從微信小程序跳轉(zhuǎn)到H5頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于uniapp中微信小程序與H5相互跳轉(zhuǎn)以及傳參的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08
深入理解事件冒泡(Bubble)和事件捕捉(capture)
下面小編就為大家?guī)?lái)一篇深入理解事件冒泡(Bubble)和事件捕捉(capture)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05

