jQuery表单过滤器------jQuery学习之路5

最新推荐文章于 2023-07-22 08:42:18 发布

dragoned_123

最新推荐文章于 2023-07-22 08:42:18 发布

阅读量175

点赞数

分类专栏： jQuery 文章标签：过滤器 jquery html checkbox

本文链接：https://blog.csdn.net/dragoned_123/article/details/107661464

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

jQuery表单过滤器

jQuery表单过滤器

jQuery表单过滤器主要是对form表单里面的inpu标签的过滤

<input type="text" value="文本框1">
<input type="text" value="文本框2" disabled>
<input type="text" value="文本框3">
<br>
<input type="checkbox" value="篮球">篮球
<input type="checkbox" value="运动" checked>运动
<input type="checkbox" value="跑步">跑步
<br>
<select>
    <option value="html">html</option>
    <option value="css">css</option>
    <option value="javascript">javascript</option>
    <option selected value="jQuery">jQuery</option>
</select>

效果

在这里插入图片描述

$(":text:enabled")

var in1 = $(":text:disabled");//选中text类型下的disabled的标签
in1.val("disabled");

$(":text:disabled")

var in2 = $(":text:enabled");//选中text类型下的enabled的标签
in2.val("enabled");

$(":checkbox:checked")

var in3 = $(":checkbox:checked");//选中checkbox类型下的checked的标签
alert(in3.val());

$(“select>option:selected”)

var in4 = $("select>option:selected");//选中select下的option标签下的selected的标签
alert(in4.val());

完整源码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>表单过滤器</title>
    <style>
        body{
            margin-top: 250px;
            margin-left: 400px;
        }
    </style>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<input type="text" value="文本框1">
<input type="text" value="文本框2" disabled>
<input type="text" value="文本框3">
<br>
<input type="checkbox" value="篮球">篮球
<input type="checkbox" value="运动" checked>运动
<input type="checkbox" value="跑步">跑步
<br>
<select>
    <option value="html">html</option>
    <option value="css">css</option>
    <option value="javascript">javascript</option>
    <option selected value="jQuery">jQuery</option>
</select>
<script>
    var in3 = $(":checkbox:checked");
    alert(in3.val());
    var in4 = $("select>option:selected");
    alert(in4.val());
    var in1 = $(":text:disabled");
    in1.val("disabled");
    var in2 = $(":text:enabled");
    in2.val("enabled");
</script>
</body>
</html>

dragoned_123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery表单过滤器------jQuery学习之路5

文章目录jQuery表单过滤器效果$(":text:enabled")$(":text:disabled")$(":checkbox:checked")$("select>option:selected")完整源码jQuery表单过滤器jQuery表单过滤器主要是对form表单里面的inpu标签的过滤<input type="text" value="文本框1"><input type="text" value="文本框2" disabled><input ty
复制链接

扫一扫