复选框checkbox

最新推荐文章于 2024-07-11 18:00:32 发布
最新推荐文章于 2024-07-11 18:00:32 发布
阅读量81 收藏
点赞数
文章标签： javascript ViewUI

 

复选框：checkbox
html 结构 <input type="checkbox" value="test" />测试

获取value值
        function getValue() {
            var str = "";
            for (var i = 0; i < list.length; i++) {
                var tmp = list[i];
                if (tmp.type == "checkbox") {   // 判断类型
                    if (tmp.checked) {          // 判断是否选中
                        str += tmp.value;
                    }
                }
            }
            alert(str);
        }

全选
        function checkAll() {
            for (var i = 0; i < list.length; i++) {
                var tmp = list[i];
                if (tmp.type == "checkbox") {
                    if (!tmp.checked) {
                        tmp.checked = true;
                    }
                }
            }
        }
取消全选
        function removeAll() {
            for (var i = 0; i < list.length; i++) {
                var tmp = list[i];
                if (tmp.type == "checkbox") {
                    if (tmp.checked) {
                        tmp.checked = false;
                    }
                }
            }
        }
反选
        function antiAll() {
            for (var i = 0; i < list.length; i++) {
                var tmp = list[i];
                if (tmp.type == "checkbox") {
                    if (tmp.checked) {
                        tmp.checked = false;
                    }
                    else {
                        tmp.checked = true;
                    }
                }
            }
        }

<!DOCTYPE html> <html> <head> <title>复选框checkbox---www.cnblogs.com/kuikui</title> </head> <body> <div id="cont_boxes"> <input type="checkbox" value="test1" />a1 <input type="checkbox" value="test2" />a2 <input type="checkbox" value="test3" />a3 <input type="checkbox" value="test4" />a4 <input type="checkbox" value="test5" />a5 <input type="checkbox" value="test6" />a6 </div> <input type="button" value="确定" οnclick="getValue()" /> <input type="button" value="全选" οnclick="checkAll()" /> <input type="button" value="取消" οnclick="removeAll()" /> <input type="button" value="反选" οnclick="antiAll()" /> <script type="text/javascript"> var boxes = document.getElementById("cont_boxes"); var list = boxes.getElementsByTagName("input"); function getValue() { var str = ""; for (var i = 0; i < list.length; i++) { var tmp = list[i]; if (tmp.type == "checkbox") { // 判断类型 if (tmp.checked) { // 判断是否选中 str += tmp.value; } } } alert(str); } function checkAll() { for (var i = 0; i < list.length; i++) { var tmp = list[i]; if (tmp.type == "checkbox") { if (!tmp.checked) { tmp.checked = true; } } } } function removeAll() { for (var i = 0; i < list.length; i++) { var tmp = list[i]; if (tmp.type == "checkbox") { if (tmp.checked) { tmp.checked = false; } } } } function antiAll() { for (var i = 0; i < list.length; i++) { var tmp = list[i]; if (tmp.type == "checkbox") { if (tmp.checked) { tmp.checked = false; } else { tmp.checked = true; } } } } </script> </body> </html>

运行代码

weixin_33962621
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
van-checkbox 复选框功能
无知者无畏
03-09 2504
van-checkbox 复选框功能 涉及的功能点： 动态设置弹出框的最大高度 VUE点击遮罩层内功能区以外的地方，遮罩层关闭 设置disabled，确定添加不可修改 去除默认滚动条 <template> <div class="hw_detail"> <div @click="isPop = true" class="btn"> <span>添加选项</span> </div> <di
类似checkbox复选框功能
crystalHy的博客
04-19 711
防checkbox功能，勾选时，为实心
自动化测试selenium(四)check，选中复选框，操作一组元素
weixin_30865427的博客
11-15 582
定位复选框位置 打开浏览器，按F12，审查元素 接下来，我们要实现选中复选框 List<WebElement> inputs = driver.findElements(By.tagName("input")); for(WebElement checkbox : inputs){ //System.out.println(checkbox.getAttri...
Checkbox复选框
起名真难的博客
08-23 1443
1.判断类型为Null和空的方法 IsNullOrEmpty
9.7 复选框checkbox
mmsx2017的博客
03-13 198
一、复选框checkbox 单选按钮radio只能从选项列表中选择一项，而复选框checkbox可以从选项列表中选择一项或者多项。 语法： &lt; input type=”checkbox” value=”复选框取值” checked=”checked”/&gt; 说明： （1）checked属性表示该选项在默认情况下已经被选中。不像单选按钮，对于复选框，一个选项列表中可以有多个复选框...
复选框（checkbox）、多选框
qq_27009517的博客
04-28 6604
1、需求分析 可同时选中多个选项，实现全选、全不选、反选等功能。 2、技术分析 基础的HTML、CSS、JavaScript。 3、详细分析 3.1 HTML部分 图示是一个列表加底部一段文字说明，列表包含三个部分，整体是一个多选列表，上部是总的选项，下面是具体选项，因此该列表是一个自定义列表： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt...
复选框CheckBox
qq_63997064的博客
04-20 2406
基础控件-CheckBox
jquery获取复选框checkbox的值的简单实现方法
10-22
下面小编就为大家带来一篇jquery获取复选框checkbox的值的简单实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS复选框checkbox动画特效下载特效代码
03-20
总的来说，这个"JS复选框checkbox动画特效"是提升网页互动性和用户体验的实用工具，通过巧妙的编程技巧，为复选框赋予了生命和活力，使网页更加生动有趣。在实际开发中，合理运用这类特效可以提高用户满意度，从而...
jquery复选框checkbox实现删除前判断
10-26
在这个特定的场景中，我们需要实现一个功能，即在用户尝试删除数据前，判断他们是否至少选中了一个复选框（checkbox）。这通常发生在有多个记录需要操作时，如批量删除。 首先，我们来看一下提供的 jQuery 代码片段...
网页表单下拉列表框、单选框、复选框自动填写方法
05-25
网页表单下拉列表框、单选框、复选框自动填写方法
jquery复选框CHECKBOX全选、反选
10-30
在jQuery中，处理复选框（CHECKBOX）的全选和反选操作是常见的需求，尤其是在数据筛选或批量操作的场景下。这里介绍一个官方提供的函数`CheckboxGroup`，它简化了这一过程。该函数在2018年6月18日的最新版本中发布，...
CSS3美化复选框checkbox
11-11
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了许多强大的新特性，其中之一就是能够对复选框（checkbox）进行美化，从而提升用户界面的视觉吸引力和交互体验。复选框是HTML中一种基本的表单元素，通常用于让...
超炫的复选框（CheckBox）效果研究及实践
had_meno的博客
12-12 473
在”前端里“发现了”9款超炫的 CSS3 复选框（Checkbox)“的源码，网址为http://www.yyyweb.com/3103.html，可进行在线演示以及源码下载。 9种CSS3复选框效果如下所示： 而我特选其中的一种先进行研究并加以实践： 我选择的效果是第三种： 源码如下，并加以注释： 无标题文档 /* .slideThree */ .slid
jQuery操作复选框checkbox技巧总结
Golden的专栏
10-28 9800
jQuery操作复选框checkbox技巧总结 设置选中、取消选中、获取被选中的值、判断是否选中等 一、checked属性定义 先了解下input标签的checked属性： 1、HTML <input> checked 属性 ◆ 定义和用法 checked 属性是一个布尔属性。 checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 checked 属性适用于 <input type="checkbox"> 和 <inp..
复选框——Checkbox的实例使用
博樽
05-31 786
import java.awt.*; import java.awt.event.WindowAdapter; import java.awt.event.WindowEvent; public class Ex_Checkbox extends Frame{ Checkbox c1,c2,c3,c4; Panel p,panel; Label label; public Ex_Checkbox(String title) { super(title); c1= new Checkbox(
checkBox复选框
jiawen2012的博客
09-10 320
// 初始化checkBox checkBox = (CheckBox) findViewById(R.id.checklanqiu); // 通过设置checkBox的监听事件,来判断checkbox是否被选中 checkBox.setOnCheckedChangeListener(new OnCheckedChangeListener() { @Override public
html复选框
weixin_33924312的博客
09-10 82
1、添加复选框 <input type="checkbox" id="yc" name="yc" value="year" /> 2、判断复选框是否被勾选 document.getElementById("yc").checked==true 转载于:https://www.cnblogs.com/zhutouying/p/3312043.html...
vue2 实现原生 WebSocket
最新发布
weixin_38797742的博客
07-11 244
原生WebSocket： new WebSocket。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值