html中实现选项的全反选,js实现复选框的全选、全不选和反选

js实现复选框的全选、全不选和反选

主要是用遍历的方法查找元素，然后通过改变checked的属性来选择，为true则是选中状态，为false则是未选状态

实现代码

复选框的选择

#btn{

margin: 5px auto;

}

#btn>input{

font-size: 16px;

color: #fff;

background-color: rgb(110, 34, 182);

outline: none;

}

#city{

background-color: aqua;

}

window.οnlοad=function(){

var obt1 = document.getElementById('btn1');

var obt2 = document.getElementById('btn2');

var obt3 = document.getElementById('btn3');

var ocity = document.getElementById('city');

var oinput = ocity.getElementsByTagName('input');

obt1.οnclick=function(){

for(var i=0;i

{

oinput[i].checked=true;

}

}

obt2.οnclick=function(){

for(var i=0;i

{

oinput[i].checked=false;

}

}

obt3.οnclick=function(){

for(var i=0;i

{

if(oinput[i].checked==false)

{

oinput[i].checked=true;

}else{

oinput[i].checked=false;

}

}

}

}

北京

上海

广州

深圳

武汉

结果

复选框(checkbox)、多选框

1.需求分析 可同时选中多个选项,实现全选.全不选.反选等功能. 2.技术分析 基础的HTML.CSS.JavaScript. 3.详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明,列 ...

jQuery对复选框(checkbox)的全选，全不选，反选等的操作

效果截图: HTML代码:

• jQuery实现checkbox(复选框)选中、全选反选代码

  谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  复选框(checkox)全选、全不选、反选、获得选中项值的用例

  HTML部分:

  • 组合框里添加复选框的方法(使用勾选的假象，用图片代替而已，并非QT原生支持)

    组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...

    checkbox 多选框 ：jquery之全选、全不选、反选

    javascriptjqueryselectAll [html] view plaincopy   html PUBLIC "-//W3C//DTD XHTML 1 ...

    复选框回显、全选、非全选、cookie处理数据、json数组对象转换处理学习笔记参考的页面

    checkbox复选框，如何让其勾选时触发一个事件，取消勾选时不触发

    复选框全选、反选及根据值JS控制复选框默认选中事件

    HTML代码

    要实现的大概就是这样一个页面 思路 ...

    随机推荐

    C# ini文件操作【源码下载】

    介绍C#如何对ini文件进行读写操作,C#可以通过调用[kernel32.dll]文件中的 WritePrivateProfileString()和GetPrivateProfileString()函 ...

    Html - SPA页面收集(有图)

    场景,左图,又字段的布局

    ...

    apache开源项目-- UIMA

    UIMA (Unstructured Information Management applications) 是一个软件系统,用来分析大量的非结构化信息从而发掘中对最终用户有用的知识点,一个最典型的 ...

    POJ 3186Treats for the Cows (区间DP)

    详见代码 #include #include #include using namespace s ...

    stm32 Bootloader设计(YModem协议) (转)

    源:stm32 Bootloader设计(YModem协议) 相信很多人都希望,不开盖就可以对固件进行升级吧,就像手机那些.下文中的bootload就来实现这样的功能. 前段时间有项目关于Bootlo ...

    2018-2019-2 20165234 《网络对抗技术》 Exp5 MSF基础应用

    实验五 MSF基础应用 实验内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践,ms08_067(成功) 2. 一个针对浏览器 ...

    获得随机N位数不重复数字

    1, 总结下:每个Random实例里面有一个原子性的种子变量用来记录当前的种子的值,当要生成新的随机数时候要根据当前种子计算新的种子并更新回原子变量.多线程下使用单个Random实例生成随机数时候,多 ...

    (四) 天猫精灵接入Home Assistant-ESP-WIFI模块通过mqtt协议接入HASS

    总过程 1 ESP8266上电后,初始化 连接MQTT服务器 发布自身配置信息----hass自动发现该设备 订阅hass的命令话题---接收命令 发布hass的状态话题---返回自身状态 2 ESP ...

    iOS UI基础-14.0 DatePicker

    DatePicker的主要属性: Mode:显示的内容,可以选择日期.时间的自由组合 Locale:显示的语言样式 Interval:每个选项的时间间隔 Date:当前选择的时间 Constraint ...

    Java计算图的匹配率

    2016-07-02 大概意思就是这样了,代码里我貌似没有计算最后一步,但是原理都是一样的.....R1有5个点P1有四个点,他们共同的点是4个,那就是共同点4*4/(R1的5个点*P1的四个点就是0 ...