JQuery中的表单过滤器

106 阅读 0 评论 70 点赞

我是靠谱客的博主清新跳跳糖，最近开发中收集的这篇文章主要介绍JQuery中的表单过滤器，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
    <form action="" method="get" id="form1">
        <input type="text" id="txt1" name="text"/>
        <input type="text" id="txt1"  name="text" disabled="disabled"/>
        <input type="text" id="txt1" name="text" />
        <input type="text" id="txt1"  name="text"/>
        <input type="text" id="txt1"  name="text"/>
        <input type="text" id="txt1"  name="text" disabled="disabled"/>
        <textarea id="txta1"  name="text"></textarea>
        <input type="checkbox" /><input type="checkbox"  /><input type="checkbox"  />
        <select >
            <option>haha1</option>
            <option>haha2</option>
            <option>haha3</option>
            <option>haha4</option>
        </select>
    </form>
    <button id="btn1">按钮</button>
    <script type="text/javascript">
        $(function () {
            //得到表单中被禁用的元素
            $("#form1 :disabled").css({ "backgroundColor": "blue" });
            //得到表单中没有被禁用的元素
            $("#form1 :enabled").css({ "backgroundColor": "red" });
            //得到表单中被选中的复选框
            $("#form1 input:checked").prop("checked",false);
            //得到表单中没有被选中的复选框
            $("#form1 input:not(:checked)").prop("checked", true);
            //得到被选中的下拉框
            $("#btn1").click(function () {
                $("#form1 option:selected").text(function (index,val) {
                    return "===" + val + "===";
                });
            });
            //得到为被选中的下拉框
            $("#btn1").click(function () {
                $("option:not(:selected)").text(function (num,val) {
                    return "===" + val + "===";
                });
            });
        });
    </script>
</body>
</html>