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>
以上就是本文的全部內(nèi)容,希望對大家的學(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)簡單的全選和反選功能
- javaScript實(shí)現(xiàn)復(fù)選框全選反選事件詳解
- JavaScript實(shí)現(xiàn)頁面一鍵全選或反選
相關(guān)文章
JSON在Javascript中的使用(eval和JSON.parse的區(qū)別)詳細(xì)解析
這篇文章主要介紹了JSON在Javascript中的使用以及eval和JSON.parse的區(qū)別詳細(xì)解析,本文對eval()和JSON.parse()的區(qū)別介紹的非常詳細(xì),需要的朋友可以參考下2017-09-09JS對select控件option選項(xiàng)的增刪改查示例代碼
Javascript操作select是表單中比較常見的,大家可以在網(wǎng)上搜索到很多的相關(guān)資料,接下來為大家詳細(xì)介紹下,JS動態(tài)操作select中的各種方法,感興趣的朋友可以參考下2013-10-10微信小程序云開發(fā)實(shí)現(xiàn)微信支付功能業(yè)務(wù)邏輯可靠
這篇文章主要介紹了微信小程序云開發(fā)實(shí)現(xiàn)微信支付功能,云開發(fā)來開發(fā)微信小程序時,如何實(shí)現(xiàn)微信支付,并且保證業(yè)務(wù)邏輯可靠,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2022-05-05分享一個自定義的console類 讓你不再糾結(jié)JS中的調(diào)試代碼的兼容
在寫JS的過程中,為了調(diào)試我們常常會寫很多 console.log、console.info、console.group、console.warn、console.error代碼來查看JS的運(yùn)行情況,但發(fā)布時又因?yàn)镮E不支持console,又要去掉這些代碼,一不小心就會出錯2012-04-04使用 JScript 創(chuàng)建 .exe 或 .dll 文件的方法
JScript 是由微軟開發(fā)的活動腳本語言,基于 ECMAScript 規(guī)范實(shí)現(xiàn)。Internet Explorer 中的 JavaScript,實(shí)際上是指 JScript。2011-07-07Bootstrap 網(wǎng)站實(shí)例之單頁營銷網(wǎng)站
這篇文章主要介紹了Bootstrap 網(wǎng)站實(shí)例之單頁營銷網(wǎng)站的相關(guān)資料,本文給大家介紹的非常詳細(xì)具有一定的參考借鑒價值,需要的朋友可以參考下2016-10-10uniapp中微信小程序與H5相互跳轉(zhuǎn)以及傳參詳解(webview)
在單位做項(xiàng)目的時候碰到一個需求,需要從微信小程序跳轉(zhuǎn)到H5頁面,下面這篇文章主要給大家介紹了關(guān)于uniapp中微信小程序與H5相互跳轉(zhuǎn)以及傳參的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08深入理解事件冒泡(Bubble)和事件捕捉(capture)
下面小編就為大家?guī)硪黄钊肜斫馐录芭?Bubble)和事件捕捉(capture)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-05-05