前端HTML调用jQuery库，表单（前端：HTML搭配jQuery系列教程二）

最新推荐文章于 2024-03-26 09:56:49 发布

Kkh_8686

最新推荐文章于 2024-03-26 09:56:49 发布

阅读量252

点赞数

CC 4.0 BY-SA版权

分类专栏： web端 flask python 文章标签： html html5 jquery javascript

本文链接：https://blog.youkuaiyun.com/K_AAbb/article/details/116896780

python 同时被 3 个专栏收录

43 篇文章

订阅专栏

web端

17 篇文章

订阅专栏

flask

11 篇文章

订阅专栏

本文详细介绍了如何在jQuery中使用表单伪类选择器操作复选框和radio按钮，包括设置checked属性实现选中，以及通过`input:checked`获取选中项的值。适合初学者理解表单元素的动态控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单伪类选择器，指的是专门操作表单元素的一种伪类选择器。在jQuery中，常用的表单伪类选择器如下表所示：

在这里插入图片描述

1、伪类选择一：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $("input:checkbox").attr("checked", "checked");
        })
    </script>
</head>
<body>
    <p>性别：
        <label><input type="radio" name="gendar"/>男</label>
        <label><input type="radio" name="gendar"/>女</label>
    </p>
    <p>喜欢的水果：
        <label><input type="checkbox"/>苹果</label>
        <label><input type="checkbox"/>西瓜</label>
        <label><input type="checkbox"/>蜜桃</label>
    </p>
</body>
</html>

运行效果：
在这里插入图片描述
$(“input:checkbox”)表示选取所有的复选框，attr(“checked”, “checked”)表示设置复选框的checked属性值为checked，也就是选中所有复选框。对于attr()方法，我们在“5.1 属性操作”一节中会给大家详细介绍，这里了解一下即可。

2、伪类选择二：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var result = $("input:checked").val();
            alert(result);       //弹出被选中文本框的值
        })
    </script>
</head>
<body>
    <p>喜欢的水果：
        <label><input type="checkbox" value="苹果"/>苹果</label>
        <label><input type="checkbox" value="西瓜" checked/>西瓜</label>
        <label><input type="checkbox" value="蜜桃"/>蜜桃</label>
    </p>
</body>
</html>

运行效果：
在这里插入图片描述