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