复选框 html 操作,HTML页面中复选框的操作方法

原标题：HTML页面中复选框的操作方法

复选框在网页中很是常见，无论是电商网站，还是平台，只有有需要选择的地方就会见到复选的身影。接下来，是我之前写过的两个小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;

}

全选	复选框全选示例







反选

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的写法，不涉及Java的；

.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%;

}

建站免费素材下载：sucaiq.com

如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对素材圈的支持！若你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！返回搜狐，查看更多

责任编辑：

复选框 html 操作,HTML页面中复选框的操作方法相关推荐

jQuery扩展实现复选框批操作
jQuery提供了扩展接口jQuery.extend(Object)和jQuery.fn.extend(Object),前者是在jQuery对象上进行扩展(同jQuery的工具方法),而后者是在jQu ...
HTML复选框的全选、全不选以及单选操作。
今天在进行HTML的table练习的时候,发现一个比较有趣的知识点,有关于复选框的全选.全不选,以及单选操作的相关问题. 待我上网搜索了一下相关资料,发现有关于全选以及全不选的详解还是挺多的,但是复选 ...
jq设置checked是否选中_jQuery对checkbox复选框操作：判断是否选中等
<jQuery对checkBox复选框操作:判断是否选中等>要点: 本文介绍了jQuery对checkBox复选框操作:判断是否选中等,希望对您有用.如果有疑问,可以联系我们. 一.jqu ...
检查是否已使用jQuery选中复选框
如何检查是否使用复选框数组的ID选中了复选框数组中的复选框? 我正在使用以下代码,但是无论ID为何,它始终返回已选中复选框的数量. function isCheckedById(id) {alert( ...
jQuery实现获取选中复选框的值
应用场景: 我们应该经常见到系统中出现列表,会有一个对列表数据的操作(如删除, 修改,查看等).我们可以在每个列表项后面加一个删除按钮,把列表项的相关参数(如 id)post到后台进行删除.当然如果 ...
jq多选按钮值_jQuery实现获取选中复选框的值实例详解
应用场景: 我们应该经常见到系统中出现列表,会有一个对列表数据的操作(如删除, 修改,查看等).我们可以在每个列表项后面加一个删除按钮,把列表项的相关参数(如 id)post到后台进行删除.当然如果你 ...
axure实现复选框全选_Axure RP实例教程：全选与取消全选效果
原标题:Axure RP实例教程:全选与取消全选效果 Axure RP 9 Mac这款原型设计软件能让设计者快速创建应用软件,或者在web网站的线框图.流程图.原型和规格的设计制作,从低到高的视觉和交 ...
使用jquery检查/取消选中复选框？ [重复]
本文翻译自:check / uncheck checkbox using jquery? [duplicate] This question already has an answer here: 这 ...
jstree中复选框的使用
这里写自定义目录标题 jstree中复选框的使用 1.之前使用需要下载js,可以自行到jstree官网上下载. 需要先引用jquery.js,然后再引用jstree.js 2.插件 dnd 支持拖拽, ...

复选框 html 操作,HTML页面中复选框的操作方法

复选框 html 操作,HTML页面中复选框的操作方法相关推荐

最新文章

热门文章