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

最新推荐文章于 2021-06-20 01:11:47 发布

Kkh_8686

最新推荐文章于 2021-06-20 01:11:47 发布

阅读量203

点赞数

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

本文链接：https://blog.csdn.net/K_AAbb/article/details/116896780

版权

python 同时被 3 个专栏收录

43 篇文章 14 订阅

订阅专栏

web端

17 篇文章 1 订阅

订阅专栏

flask

11 篇文章 1 订阅

订阅专栏

表单伪类选择器，指的是专门操作表单元素的一种伪类选择器。在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>

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

Kkh_8686

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端HTML调用jQuery库，表单（前端：HTML搭配jQuery系列教程二）

表单伪类选择器，指的是专门操作表单元素的一种伪类选择器。在jQuery中，常用的表单伪类选择器如下表所示：1、伪类选择一：代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="js/jquery-1.12.4.min.js"></script> <s
复制链接

扫一扫