表单对象属性过滤选择器，隔行换色，选中行换色，全选，反选，全不选，开关灯，加法计算

置顶 于 2020-08-04 17:19:28 发布
阅读量302 收藏 1
点赞数
文章标签： checkbox js jquery html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AutisticRoad/article/details/107791850
版权

表单对象属性过滤选择器

<!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="Content-Type" content="text/html; charset=utf-8" />
    <title>2-11</title>
    <!--   引入jQuery -->
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function () {
            //可用文本框赋值
            //注册点击事件
            $("#btn1").click(function () {
                //遍历对所有可用文本框赋值
                $("input[value=可用文本框]").each(function () {
                    $("input[value=可用文本框]").val("对表单内 可用input 赋值操作");
                });
            });

            //不可用文本框赋值
            //注册点击事件
            $("#btn2").click(function () {
                //遍历对所有不可用文本框赋值
                $("input[value=可用文本框]").each(function () {
                    $("input[value=不可用文本框]").val("对表单内 不可用input 赋值操作");
                });
            });

            //页面加载时候加载数据
            //首先获取checkbox选中的个数
            var num = $("input[name=newsletter]:checked").length;
            var arr = new Array();
            $("input[name=newsletter]:checked").each(function () {
                //将遍历的项的值存入数组中
                arr.push($(this).val());
            });
            //输出获取的值
            $("div:eq(0)").text("选中了" + num + "个，分别是：" + arr.toString());

            //单击checkbox是执行加载数据
            $("input[name=newsletter]").click(function () {
                //首先获取checkbox选中的个数
                var num = $("input[name=newsletter]:checked").length;
                var arr = new Array();
                $("input[name=newsletter]:checked").each(function () {
                    //将遍历的项的值存入数组中
                    arr.push($(this).val());
                });
                //输出获取的值
                $("div:eq(0)").text("选中了" + num + "个，分别是：" + arr.toString());
            });

            //加载页面的时候加载值
            //定义两个数组接收值
            var arrOne = new Array();
            var arrTwo = new Array();
            //遍历第一个select中选中的
            $("[name=test] option:selected").each(function () {
                //将遍历项的值存入数组中
                arrOne.push($(this).text());
            });
            //遍历第二个select中选中的
            $("[name=test2] option:selected").each(function () {
                //将遍历项的值存入数组中
                arrTwo.push($(this).text());
            });
            //将获取到的值输出到div中
            $("div:eq(1)").text("ADC是：" + arrOne.toString() + "。辅助是：" + arrTwo.toString());

            //单击的时候出发加载事件
            $("select").change(function () {
                //定义两个数组接收值
                var arrOne = new Array();
                var arrTwo = new Array();
                //遍历第一个select中选中的
                $("[name=test] option:selected").each(function () {
                    //将遍历项的值存入数组中
                    arrOne.push($(this).text());
                });
                //遍历第二个select中选中的
                $("[name=test2] option:selected").each(function () {
                    //将遍历项的值存入数组中
                    arrTwo.push($(this).text());
                });
                //将获取到的值输出到div中
                $("div:eq(1)").text("ADC是：" + arrOne.toString() + "。辅助是：" + arrTwo.toString());
            });
        });
                        //]]>
    </script>
</head>
<body>
    <h3> 表单对象属性过滤选择器.</h3>
    <form id="form1" action="#">
        <button type="reset">重置所有表单元素</button>
        <br /><br />
        <button id="btn1">对表单内 可用input 赋值操作.</button>
        <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
        可用元素：<input name="add" value="可用文本框" id="textadd" />  <br />
        不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br />
        可用元素： <input name="che" value="可用文本框" /><br />
        不可用元素：<input name="name" disabled="disabled" value="不可用文本框" /><br />
        多选框：<br />
        <input type="checkbox" name="newsletter" checked="checked" value="ADC" />ADC
        <input type="checkbox" name="newsletter" value="辅助" />辅助
        <input type="checkbox" name="newsletter" value="法师" />法师
        <input type="checkbox" name="newsletter" checked="checked" value="打野" />打野
        <input type="checkbox" name="newsletter" value="战士" />战士
        <br />展示多选框选中的个数<div></div><br /><br />
        下拉列表ADC：<br />
        <select name="test" multiple="multiple" style="height:100px">
            <option>女警</option>
            <option selected="selected">金克斯</option>
            <option>EZ</option>
            <option selected="selected">奥巴马</option>
            <option>飞机</option>
            <option>寒冰</option>
        </select><br /><br />
        下拉列表辅助：<br />
        <select name="test2">
            <option>宝石</option>
            <option>风女</option>
            <option selected="selected">机器人</option>
            <option>唤潮鲛姬</option>
            <option>众星之子</option>
            <option>琴女</option>
        </select><br /><br /><div></div>
    </form>
</body>
</html>

多选框触发传值

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(document).ready(function () {
            //为所有的checkbox添加点击事件
            $("input").click(function () {
                //获取选中的checkbox的个数
                var num = $(":checkbox:checked").length;
                //定义一个数组接收值
                var arr = new Array();
                //便利选中的checkbox，并将获取的值放入数组
                $(":checkbox:checked").each(function () {
                    arr.push($(this).val());
                });
                //输出内容
                $("h6").text("你一共选中了" + num + "项，分别是：" + arr.toString());
            });
        });
    </script>
</head>
<body>
    <input id="str1" type="checkbox" name="name" value=".Net" />.Net
    <input id="str2" type="checkbox" name="name" value="Java" />Java
    <input id="str3" type="checkbox" name="name" value="PHP" />PHP
    <br />
    <h6></h6>
</body>
</html>

全选，反选，全不选

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(document).ready(function () {
            //获取所有的checkbox控件
            var inputs = $("input[type='checkbox']");
            //注册点击全选
            $("#but_YES").click(function () {
                //遍历所有的checkbox控件，将checked属性改为true
                inputs.each(function () {
                    $(this).prop("checked", true);
                });
            });
            //注册点击全不选
            $("#but_NO").click(function () {
                //遍历所有的checkbox控件，将checked属性改为false
                inputs.each(function () {
                    $(this).prop("checked", false);
                });
            });
            //注册点击反选
            $("#but_YES_NO").click(function () {
                //遍历所有的checkbox控件，将checked属性改为如果为true改为false，如果为false改为true
                $("[name=name]:checkbox").each(function () {
                    this.checked = !this.checked;
                });
            });
        });
    </script>
</head>
<body>
    <input type="checkbox" name="name" value="菊花台" />菊花台
    <br />
    <input type="checkbox" name="name" value="千里之外" />千里之外
    <br />
    <input type="checkbox" name="name" value="青花瓷" />青花瓷
    <br />
    <input type="checkbox" name="name" value="兰亭序" />兰亭序
    <br />
    <input type="checkbox" name="name" value="超人不会飞" />超人不会飞
    <br />
    <input type="checkbox" name="name" value="七里香" />七里香
    <br />
    <input type="checkbox" name="name" value="龙战骑士" />龙战骑士
    <br />
    <hr />
    <input id="but_YES" type="button" name="name2" value="全选" />
    <input id="but_YES_NO" type="button" name="name2" value="反选" />
    <input id="but_NO" type="button" name="name2" value="全部不选" />
</body>
</html>

隔行变色和前三名

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(document).ready(function () {
            //注册点击事件
            $("#btn_gh").click(function () {
                //将tr偶数行的部分添加css样式
                $("tr:odd").css("background-color", "red");
            });
            //注册点击事件
            $("#btn_top").click(function () {
                //将前三个li添加css样式
                $("li:lt(3)").css("font-size", "30px");
            });
        });
    </script>
</head>
<body>
    <input id="btn_gh" type="button" name="name" value="隔行变色" />
    <input id="btn_top" type="button" name="name" value="前三名" />
    <br />
    <table>
        <tr>
            <td>魔法1</td>
        </tr>
        <tr>
            <td>魔法2</td>
        </tr>
        <tr>
            <td>魔法3</td>
        </tr>
        <tr>
            <td>魔法4</td>
        </tr>
        <tr>
            <td>魔法5</td>
        </tr>
        <tr>
            <td>魔法6</td>
        </tr>
    </table>
    <br />
    <ul>
        <li>火箭</li>
        <li>火箭</li>
        <li>火箭</li>
        <li>火箭</li>
        <li>火箭</li>
        <li>火箭</li>
    </ul>
</body>
</html>

选中行变色

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
/*        外部样式表*/
        .s1 {
            background-color: red;
        }
    </style>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(document).ready(function () {
            //给所有的tr注册单击事件
            $("table tr").click(function () {
                //给当前选中行的tr添加一个外部样式class为s1，并删除它所有同辈（tr行）的拥有class为s1的外部样式
                $(this).addClass("s1").siblings().removeClass("s1");
            });
        });
    </script>
</head>
<body>
    <table border="1">
        <tr>
            <td>TOP1</td>
            <td>周杰伦</td>
        </tr>
        <tr>
            <td>TOP2</td>
            <td>林俊杰</td>
        </tr>
        <tr>
            <td>TOP3</td>
            <td>潘玮柏</td>
        </tr>
        <tr>
            <td>TOP4</td>
            <td>王力宏</td>
        </tr>
        <tr>
            <td>TOP5</td>
            <td>许嵩</td>
        </tr>
    </table>
</body>
</html>

两位数加法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(document).ready(function () {
            //注册单击事件
            $("#btn_jisuan").click(function () {
                //获取两个文本框的值
                var num1 = $("#textNum1").val();
                var num2 = $("#textNum2").val();
                //将获取的值进行运算后输出到文本框中
                $("#textNumSum").val(parseInt(num1) +parseInt(num2));
            });
        });
    </script>
</head>
<body>
    <input id="textNum1" type="text" name="name" value="" />+
    <input id="textNum2" type="text" name="name" value="" />
    <input id="btn_jisuan" type="button" name="name" value="=" />
    <input id="textNumSum" type="text" name="name" value="" />
</body>
</html>

开关灯

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="../Scripts/jquery-1.11.3.js"></script>
    <script>
        $(document).ready(function () {
            //注册点击事件
            $("#btn_OY").click(function () {
                //判断需求是开灯还是关灯
                if ($(this).val() == "关灯") {
                    //为body更改背景
                    $("body").css("background-color", "black");
                    //将按钮的值进行更改
                    $(this).val("开灯");
                } else {
                    //为body更改背景
                    $("body").css("background-color", "white");
                    //将按钮的值进行更改
                    $(this).val("关灯");
                }
            });
        });
    </script>
</head>
<body style="background-color:black;">
    <input id="btn_OY" type="button" name="name" value="开灯" />
</body>
</html>
AutisticRoad
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值