JQuery中的表单过滤器

最新推荐文章于 2023-07-22 08:43:01 发布

一只极度渴望成长的Giser

最新推荐文章于 2023-07-22 08:43:01 发布

阅读量181

点赞数

分类专栏： Javascript、JQuery练习文章标签： JQuery中的表单过滤器

本文链接：https://blog.csdn.net/qq_32077521/article/details/99828390

版权

Javascript、JQuery练习专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!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>