多选框(全选反选)-html

<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
    window.onload = function() {
        var flag=false;
        document.getElementById("all").onclick=function(){
            flag=!flag;
            var items=document.getElementsByName("item");
            for(var x=0;x<items.length;x++){
                items[x].checked=flag;
            }
        };
        document.getElementById("unall").onclick=function(){
            var items=document.getElementsByName("item");
            for(var x=0;x<items.length;x++){
                items[x].checked=!items[x].checked;
            }
        };
    }
</script>
</head>

<body>
    <div>商品列表</div>
    <input type="checkbox" name="item" value="3000" />笔记本3000元<br />
    <input type="checkbox" name="item" value="2500" />HTC手机2500<br />
    <input type="checkbox" name="item" value="8000" />苹果电脑8000<br />
    <input type="checkbox" name="item" value="1500" />IPAD1500<br />
    <input type="checkbox" name="item" value="400" />玩具汽车400<br />

    <input type="button" value="总金额" onclick="getSum()" />
    <input type="button" value="全选/全不选" id="all" />
    <input type="button" value="反选" id="unall" />
    <span id="sumId"></span>
</body>

</html>
时间: 2024-10-10 18:13:57

多选框(全选反选)-html的相关文章

html+css+js实现复选框全选与反选

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title>html+css+js实现复选框全选与反选</title> 5 <meta http-equiv="content-type&qu

jQuery 复选框全选/取消全选/反选

jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(fun

复选框全选、全不选和反选的效果实现

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>石家庄车库棚|tongtianty.net---复选框全选.全不选和反选的效果实现</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin func

jQuery实现复选框全选/全部取消/反选/获得选择的值

本地单文件上传脚本,命名uf 这是在本机上做的测试,利用bpcs_uploader脚本实现,只是进行简单的封装,自动完善云端文件路径. 技术要点:使用dirname获取文件所在目录,使用pwd获取文件完整路径,并作为云端文件路径. #!/bin/bash cur_dir=$(cd "$(dirname "$1")"; pwd) name=$(basename "$1") /home/grm/bin/bpcs_uploader/bpcs_uploa

js 判断 复选框全选、全不选、反选、必选一个

一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> <head> <title> 复选框全选.全不选.反选.必选一个 </title> <meta http-equiv="content-type" content="text/html;charset=GBK"/> <

JQuery实现列表中复选框全选反选功能封装

JQuery实现列表中复选框全选反选功能封装 我们在做列表的时候经常会遇到全选,反选进行批量处理问题,例如: 我当时就是简单的实现了,然后想封装到公共的js中,封装的太烂,不好意思贴出来了(就是把实现代码之间放到公共js中,然后每个页面都用固定的id,class,现在想想我都不好意思叫他封装了),然后想到之前老大有写过这个功能去看下他怎么写的,真是没有对比就没有伤害啊,这才叫封装: 1 $(':checkbox[data-check-target]').click(function () { 2

jQuery如何实现复选框全选和全不选

jQuery如何实现复选框全选和全不选: 在网页中经常有复选框的全选和全不选效果,比如在后台新闻管理.用户空间信息管理等都有用到,下面就提供一个jQuery实现的此效果.代码实例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&quo

jQuery复选框全选全不选代码

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="http://www.51texiao.cn/" /><title>jQuery复选框全选全不选代码<

python 自动化测试多选框全选

def click_checkbox(self): ''' 多选框全选操作 获取全部的多选框,一定要用elements, 然后遍历,循环点击 防止反选,is_selected判断是否选中 选中返回True,否则返回False :return: ''' self.driver.get(r'E:\测试2\资料\radio.html') checkbox = self.driver.find_elements_by_xpath('//input[@type="checkbox"]') for

javascript实现复选框全选和取消代码分析

javascript实现复选框全选和取消代码分析:复选框是常用的元素之一,而点击实现全选和取消全选又是最为常用的功能,特别是在批量操作管理中,非常的方便,下面就通过代码实例介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.soft