Jscript复选框

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
    <script type="text/javascript">
    <!--全选框的方法-->
        function check(object){
            var  checks=document.getElementsByName("checks");
            if (checks!=null)
            {
                for (var i=0;i<checks.length;i++ )
                {
                    checks[i].checked=document.getElementById("checkAll").checked;
                }
            }
        };
        <!--这里要注意如果 var checkall=document.getElementById("checkAll").checked; 下面判断 checkall==true 语句是错的!逻辑是对的,语法是错的-->
        function checks(){
            var checkall=document.getElementById("checkAll");
            var checks=document.getElementsByName("checks");
            var count=0;
            var sum=0;
            for (var i=0;i<checks.length ;i++ )
            {
                if (checks[i].checked==true)
                {
                    count=count+1;
                }
                if(checks[i].checked==false){
                    sum=sum+1;
                }
            }
            alert(sum);
            if (count==checks.length)
            {
                checkall.checked=true;
            }
            if (sum>0)
            {
                if (checkall.checked==true)
                {
                    checkall.checked=false;
                }
            }

        }

    </script>
 </head>
 <body>
    <div id="" class="">
        <table>
        <tr>
            <td><input type="checkbox" id="checkAll" onclick="check(this)"></td>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品描述</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checks" onclick="checks()"></td>
            <td>酒精</td>
            <td>12</td>
            <td>酒精你懂的</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checks" onclick="checks()"></td>
            <td>饭盒</td>
            <td>15</td>
            <td>吃饭的工具,你不知道?</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checks" onclick="checks()"></td>
            <td>酒精</td>
            <td>12</td>
            <td>酒精你懂的</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checks" onclick="checks()"></td>
            <td>饭盒</td>
            <td>15</td>
            <td>吃饭的工具,你不知道?</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checks" onclick="checks()"></td>
            <td>酒精</td>
            <td>12</td>
            <td>酒精你懂的</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checks" onclick="checks()"></td>
            <td>饭盒</td>
            <td>15</td>
            <td>吃饭的工具,你不知道?</td>
        </tr>
        </table>
    </div>
 </body>
</html>

运行效果图

				
时间: 2024-10-11 13:05:39

Jscript复选框的相关文章

11月8日下午Jquery取属性值(复选框、下拉列表、单选按钮)、做全选按钮、JSON存储、去空格

1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv

jQuery学习(五)——使用JQ完成复选框的全选和全不选

1.在系统后台进行人员管理时,进行批量删除,使用jq完成全选和全不选 步骤分析: 第一步:引入jquery文件 第二步:书写页面加载函数 第三步:为上面的复选框绑定单击事件 第四步:将下面所有的复选框的选中状态设置成跟上面的一致! 2.具体代码实现: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用jQuery完成复选框的全选和全不

[CSS揭秘]自定义单选框和复选框

很多Web前端工程师肯定都会遇到过,在项目中,UI设计师跑来跟你说,我这个地方的表单控件需要设计成这个样子那个样子.但是用CSS却不能够修改这些控件的默认样式,于是乎,只能通过div+javascript技术来进行模拟.特别是在如今移动端的崛起时代,更加注重用户的体验.于是就更加需要这样一种hack技术. 如果对如今的前端框架有过了解,都会知道组件这个概念.那么在这些框架中,都会提供一些单选框或复选框按钮组件.可见大家之前受到表单元素的默认样式的毒害有多深. 今天先给大家简单介绍一下如何通过CS

HTML页面中A博娱乐复选框的操作方法

A博娱乐复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影.接下来,是我之前写过的两个小demo,都是关于复选框的,希望会给大家带来帮助. 第一个是关于复选框全选反选的操作,当然我在里面还加了一个小功能,就是当选择底下尚品或者其他的东西的复选框全部为选中状态时则全选按钮也变为选中状态:反之亦然. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 3

CSS 美化复选框 - 无图片方式

今天和大家分享一个不使用图片美化复选框的方式.来看下效果图吧,如下是3种不同状态下的效果: 一. Html结构 <div class="check-wrap"> <input type="checkbox" class="icheck" id="icheck" /> <label for="icheck" class="ilabel"></lab

Spring MVC-表单(Form)标签-复选框(Checkbox)示例(转载实践)

以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_checkbox.htm 说明:示例基于Spring MVC 4.1.6. 以下示例显示如何使用Spring Web MVC框架在窗体中使用单个复选框.首先,让我们使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发基于动态窗体的Web应用程序: 步骤 描述 1 创建一个名为HelloWeb的项目,在一个包com.tutorialspoint

vue.js实现单选框、复选框和下拉框

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label

jquery实现复选框全选,全不选,反选中的问题

今天试了一下用jquery选择复选框,本来以为很简单的东西却有bug,于是搜索了一下找到了解决方法. html代码如下(这里没有用任何样式,就没有再放css了): <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="test_ch5.css" > <title>test_ch5</title> &

jquery中input复选框的checked属性

在今日的多选,反选,全选试验中,关于通过jQuery方法来实现复选框的选中与否问题,我有了以下发现: 1.不能通过.css('checked','checked')方法来设置或者获取复选框的checked属性,在控制台打印输出.css('checked'),结果为undefined, 不管在HTML中是否设置了checked='checked'; 2.通过attr添加属性即.attr('checked','abc'),会给HTML中input所在处添加checked='checked'这样的代码