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

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            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;

            }

        </style>

    </head>

    <body>

        <table>

            <tr>

                <td><input id="all" type="checkbox">全选</td>

                <td width="300px">复选框全选示例</td>

            </tr>

            <tr>

                <td><input class="list" type="checkbox"></td>

                <td></td>

            </tr>

            <tr>

                <td><input class="list" type="checkbox"></td>

                <td></td>

            </tr>

            <tr>

                <td><input class="list" type="checkbox"></td>

                <td></td>

            </tr>

            <tr>

                <td><input class="list" type="checkbox"></td>

                <td></td>

            </tr>

            <tr>

                <td><input class="list" type="checkbox"></td>

                <td></td>

            </tr>

            <tr>

                <td><input class="list" type="checkbox"></td>

                <td></td>

            </tr>

            <tr>

                <td><input class="list" type="checkbox"></td>

                <td></td>

            </tr>

            <tr>

                <td><input id="opp" type="button">反选</td>

                <td></td>

            </tr>

        </table>

        <script>

                var vll = document.getElementById("all");

                var vlist=document.getElementsByClassName("list");

                var vopp=document.getElementById("opp");

                vll.onclick=function(){

                    for(var i=0;i<vlist.length;i++){   

                        vlist[i].checked=vll.checked;

                    }

                }

                for( var i=0;i<vlist.length;i++){

                    vlist[i].onclick=function(){

                        if(this.checked==false){

                            vll.checked=false; 

                            }

                        else{

                            for(var i2=0;i2<vlist.length;i2++){

                                if(vlist[i2].checked==false){

                                    break;

                                }

                                if(i2>=vlist.length-1){

                                    vll.checked=true;  

                                }

                            }

                        }

                    }  

                }

                vopp.onclick=function(){

                    for(var i=0;i<vlist.length;i++){

                    vlist[i].checked=!vlist[i].checked;

                        if(vlist[i].checked==false){

                            vll.checked=false;

                        }

                    }

                }

        </script>

    </body>

</html>

第二个呢则是自定义复选框样式，就是可以将我们的复选框使用图片来替代，以增加酷炫的效果；而且这里我是完全运用CSS3的写法，不涉及JavaScript的；

?


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

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

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

            }

        </style>

    </head>

    <body>

        <div class="box1">

            <input type="checkbox" name="" id="input1" value="" />

            <label for="input1"></label>

        </div>

        <div class="box2">

            <input type="checkbox" name="" id="input2" value="" />

            <label for="input2"></label>

        </div>

        <div class="box3">

            <input type="checkbox" name="" id="input3" value="" />

            <label for="input3"></label>

        </div>

    </body>

</html>

推荐网址：www.yxin7.com

时间： 2024-07-30 23:46:13

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

dojo中创建包含节点复选框的树形（CheckBoxTree）

树形结构是界面设计程中常见的部件,在代码实现时有很多方法,但由于设计到节点的父子关系和dom节点操作,实现起来比较复杂.dojo中提供了带复选框的树形部件CheckBoxTree,使用时只需创建对应的实例即可轻松实现此功能. 部件对应的html文件代码如下: <div> <div dojoType="dijit.Dialog" dojoAttachPoint="testList" title="${title}" style=&

sharepoint中根据“是/否(复选框)”的值显示隐藏指定栏

sharepoint中根据“是/否(复选框)”的值显示隐藏指定栏 function HideColumn(targetColumn, hideColumn) { var columnObj = $("input[Title='" + hideColumn + "']"); $("input[Title='" + targetColumn + "']").bind('click',function() { if($(this).

QTreeView/QTableView中利用QStandardItem实现复选框三种形态变化

版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QTreeView/QTableView中利用QStandardItem实现复选框三种形态变化     本文地址:http://techieliang.com/2017/12/729/ 文章目录 1. 介绍 2. 源码  2.1. using_checkbox_item.h  2.2. using_checkbox_item.cpp 3. 说明 1. 介绍 复选框有三种形态:全选对勾.全不选

Extjs将gird中指定行的复选框勾选

在Extjs中,可以通过 selType添加复选框 Ext.define('ConnGrid', { title:'关联', extend: 'Ext.grid.Panel', xtype: 'checkbox-selection', store: connStore, selType: 'checkboxmodel', //复选框 ....此处省略... } ) var connGrid = Ext.create('ConnGrid'); 如果想要在表格加载数据时自动指定符合某个条件的数据自动

extjs 中动态给gridpanel 复选框赋值

最近在搞extjs时需要动态根据数据给gridpanel的复选框赋值 网上看了很多 ,多不行,最后找到一个好使的方法 如下: RBACformPanel.getSelectionModel().select(0, true); 其中RBACformPanel就是你的gridpanel, select中的参数0表示grid第一列的对象,true表示将checkbox设置为true 即为勾选状态.

android listview中自定义适配器和复选框

下面的代码中报错了,代码如下 @Override p public View getView(final int position, final View convertView, final ViewGroup parent) { final ViewHolder viewHolder; View view = convertView; if (view == null) { view = LayoutInflater.from(mContext).inflate(R.layout.row,

关于netbeans中的JComboBox（复选框）

以最近写的选课系统中添加课程项为例 1.往复选框中放入选项(根据数据库添加) (1)首先将  属性—>model中默认Item1234清空 (2)获得数据库中的数据并放入. SelectCourseView scv=new SelectCourseView(); int selectIndex=-1; SysCourseDao scd=new SysCourseDaoImpl(); List<CourseView> courselist = scd.queryAllCourse(); /

mui开发中获取单选按钮、复选框的值

js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); return;} mui.toast(res); } function getRadioRes(className){ var rdsObj = document.getElementsByClassName(className); var checkVal = null; for(i = 0; i < rd

delphi一次性批量在TScrollBox中显示N个复选框TCheckBox的源码

unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics, Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls; type TForm1 = class(TForm) ScrollBox1: TScrollBox; Button1: TButton; proce