js html css實(shí)現(xiàn)復(fù)選框全選與反選
更新時(shí)間：2021年04月11日 15:15:07 作者：自在飛花輕似夢(mèng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)復(fù)選框全選與反選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(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)文章
使用堆實(shí)現(xiàn)Top K算法（JS實(shí)現(xiàn)）
這篇文章主要介紹了使用堆實(shí)現(xiàn)Top K算法，即JS實(shí)現(xiàn)，文中詳細(xì)介紹了Top K算法，感興趣的小伙伴們可以參考一下2015-12-12
javascript伸縮型菜單實(shí)現(xiàn)代碼
這是一款真正的JavaScript伸展收縮型菜單，鼠標(biāo)放上看一看，是不是很酷？鼠標(biāo)劃出菜單項(xiàng)的時(shí)候，背景會(huì)伸長(zhǎng)。菜單沒(méi)有加鏈接，想用的自己加，再美化一下，絕對(duì)夠個(gè)性吧。2015-11-11
前端實(shí)現(xiàn)添加水印功能的常見(jiàn)方式小結(jié)
前端水印就是在網(wǎng)頁(yè)或應(yīng)用程序的前端界面上添加的一種標(biāo)記,通常是文本、圖標(biāo)或圖案等形式,下面小編就來(lái)和大家介紹四個(gè)常用的方法吧2025-03-03
JS實(shí)現(xiàn)橫向拉伸動(dòng)感伸縮菜單效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)橫向拉伸動(dòng)感伸縮菜單效果,涉及javascript基于定時(shí)函數(shù)及鼠標(biāo)事件操作頁(yè)面元素動(dòng)態(tài)變換的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
一個(gè)仿Windows UI的html table，兼容IE和firefox
兼容IE和firefox的仿Windows UI的html table2008-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自動(dòng)定位功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-10-10
基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)數(shù)值型坐標(biāo)軸刻度計(jì)算算法(echarts的y軸刻度計(jì)算),文章圍繞主題展開詳細(xì)的內(nèi)容介紹，感興趣的朋友可以參考與一下2022-06-06
JS響應(yīng)鼠標(biāo)點(diǎn)擊實(shí)現(xiàn)兩個(gè)滑塊區(qū)間拖動(dòng)效果
這篇文章主要介紹了JS實(shí)現(xiàn)的兩個(gè)滑塊區(qū)間拖動(dòng)效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件針對(duì)頁(yè)面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-10-10
基于JS實(shí)現(xiàn)密碼框(password)中顯示文字提示功能代碼
這篇文章主要介紹了實(shí)現(xiàn)密碼框(password)中顯示文字提示功能代碼,在項(xiàng)目開發(fā)中經(jīng)常會(huì)用到，需要的朋友可以參考下2016-05-05
ES6新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet用法分析
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Set與WeakSet用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了Set與WeakSet的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03