html5里折叠选框,HTML页面中复选框的操作方法

深藏阁楼爱情的钟 2022-10-05 10:53 204阅读 0赞

复选框在网页中很是常见，无论是电商网站，还是平台，只有有需要选择的地方就会见到复选的身影。接下来，是我之前写过的两个小demo，都是关于复选框的，希望会给大家带来帮助。

第一个是关于复选框全选反选的操作，当然我在里面还加了一个小功能，就是当选择底下尚品或者其他的东西的复选框全部为选中状态时则全选按钮也变为选中状态；反之亦然。

td\{

border: 1px solid black;

text-align: center;

\}

table\{

border: 1px solid black;

\}

\#opp\{

border-radius: 50%;

width: 20px;

height: 20px;

border: 1px style \#eee;

outline-style: none;

\}

<table> 
 <tbody> 
  <tr> 
   <td>全选</td> 
   <td>复选框全选示例</td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>反选</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

var vll = document.getElementById("all");

var vlist=document.getElementsByClassName("list");

var vopp=document.getElementById("opp");

vll.οnclick=function()\{

for(var i=0;i

vlist\[i\].checked=vll.checked;

\}

\}

for( var i=0;i

vlist\[i\].οnclick=function()\{

if(this.checked==false)\{

vll.checked=false;

\}

else\{

for(var i2=0;i2

if(vlist\[i2\].checked==false)\{

break;

\}

if(i2>=vlist.length-1)\{

vll.checked=true;

\}

\}

\}

\}

\}

vopp.οnclick=function()\{

for(var i=0;i

vlist\[i\].checked=!vlist\[i\].checked;

if(vlist\[i\].checked==false)\{

vll.checked=false;

\}

\}

\}

第二个呢则是自定义复选框样式，就是可以将我们的复选框使用图片来替代，以增加酷炫的效果；而且这里我是完全运用CSS3的写法，不涉及JavaScript的；

.box1\{

width: 1000px;

height: 50px;

position: relative;

\}

input\{

width: 50px;

height: 50px;

opacity: 1;

display: none;

\}

input+label\{

display: block;

width: 50px;

height: 50px;

background: url(img/2.png);

background-size: 100%;

\}

input:checked+label\{

background: url(img/1.PNG);

background-size: 100%;

\}

以上所述是小编给大家介绍的HTML页面中复选框的操作方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

发表评论取消回复

表情：

评论列表（有 0 条评论，204人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML复选框里添加下拉框,Html：实现带复选框的下拉框（一）

概述项目中要用到可多选的下拉框(select)，发现HTML中无此控件，故手动模拟实现一下。模拟所用元素：input，ul，li 代码模拟实现带复选框的下拉列表

朴灿烈づ我的快乐病毒、/ 2022年10月06日 12:49/ 0 赞/ 534 阅读

相关 html复选框文字大小设置,在html中如何设置复选框checkbox的大小？

checkbox那个框的样子是不会变大的，但触发区域可以通过你设置width height样式变大。对那个框样子不满意的话，可以将它透明度设为0，下面放一个样式中意的div，这

た入场券/ 2022年10月06日 10:57/ 0 赞/ 269 阅读

相关 html选择框美化代码,jQuery单选框复选框美化代码 - A5源码

初始现在inpit/assembly并不需要一定声明"type="inpit/assembly"(标签中)作为inpitassembly的容器，而是通过inpitassem

缺乏、安全感/ 2022年10月06日 04:00/ 0 赞/ 164 阅读

相关 html禁用整体框,启用或禁用html中的复选框

根据W3Schools你可以使用JavaScript禁用复选框。 // Get your checkbox who determine the condition var

超、凢脫俗/ 2022年10月05日 15:53/ 0 赞/ 124 阅读

相关 html中怎么写收缩式单选框,html中多选框变单选框

通过jquery将多选框变单选框多选框的name值为checkboxlist是复选框选中后更换其他复选框状态. function queryListByParam(e)\{

我不是女神ヾ/ 2022年10月05日 13:55/ 0 赞/ 161 阅读

相关 html5里折叠选框,HTML页面中复选框的操作方法

复选框在网页中很是常见，无论是电商网站，还是平台，只有有需要选择的地方就会见到复选的身影。接下来，是我之前写过的两个小demo，都是关于复选框的，希望会给大家带来帮助。第一

深藏阁楼爱情的钟/ 2022年10月05日 10:53/ 0 赞/ 205 阅读

相关 html 复选框一键反选

效果： ![Center][] <!doctype html> <html lang="en"> <head> <meta charset="UTF-

以你之姓@/ 2022年09月26日 00:27/ 0 赞/ 114 阅读

相关 jQuery复选框全选反选操作

<!DOCTYPE html> <html > <head> <title> jquery-ajax </title> <sc

刺骨的言语ヽ痛彻心扉/ 2022年08月18日 12:09/ 0 赞/ 226 阅读

相关复选框

![70][] package tu; import java.awt.BorderLayout; import java.awt.B

「爱情、让人受尽委屈。」/ 2022年05月19日 08:10/ 0 赞/ 266 阅读

相关 HTML input checkbox 复选框

`< input> `标签 type 属性值设置为 "checkbox" 即可创建一个复选框。单选按钮同一时刻只能有一个按钮处于选中状态，复选框则可以选中任意多项...

小灰灰/ 2020年05月15日 17:29/ 0 赞/ 933 阅读