jQuery 表单对象属性

ゝ一纸荒年。 2022-05-14 13:29 212阅读 0赞

jQuery有着非常丰富的DOM元素操作方法，在DOM元素中，表单元素尤为突出，在jQuery库中与表单DOM元素相关的方法是占有非常大的比例，可见一斑！接下来的文章中，将是都介绍与表单DOM元素相关的方法。

本篇文章，介绍表单元素中使用频率较高的单选按钮，复选按钮，下拉列表框相关的选择器。

1：**“:checked”** 选择器

功能：匹配所有勾选的元素

在使用单选框和复选框时，经常会需要获取当前选中的值，如果给每个按钮添加点击事件，来获取当前所选中的值，那样做效率太低了，严格来说就是错误的做法。jQuery的 “:checked” 选择器非常好的完成了这个工作。但是，想使用好jQuery的选择器，首先要有良好的代码规范，代码结构明确，避免无效的代码，使得HTML结构可读性差。

通过下面的示例具体学习一下 “:checked” 选择器的使用：

<form action="" >
        <input type="radio" value="web" name="demo">
        <input type="radio" checked value="梦之蓝" name="demo">
        <input type="radio" value="前端开发" name="demo">
    
        <input type="checkbox" checked value="web" name="demo2">
        <input type="checkbox" checked value="梦之蓝" name="demo2">
        <input type="checkbox" value="前端开发" name="demo2">
    </form>
    
    
    var demo=$("form>input[name='demo']:checked");
    console.log(demo.val());    //梦之蓝
    
    var demo2=$("form>input[name='demo2']:checked");
    console.log(demo2.val());   //web

**“:checked”选择器 **能很好的匹配出当前所选中的单选框按钮的值，但是复选框表现不足，未能正确的得到所有选中的值，因为当前所匹配出的元素有多个，返回的是一个数组的jQuery对象，那如何正确的获取呢？可阅读前面所发布的文章[《jQuery 筛选之map()》][jQuery _map]找到答案。

2：**“:selected”** 选择器

功能：匹配所有选中的 option 元素

下拉列表是使用频率非常高的，与之对应的 “:selected” 选择器也是非常的实用。

通过下面的示例具体学习一下 “:selected” 选择器的使用：

<form action="">
        <select name="demo3">
            <option value="前端开发">前端开发</option>
            <option value="梦之蓝">梦之蓝</option>
            <option value="web" data-id="web-7258" selected>web</option>
        </select>
    </form>

如果只是想获取该下拉列表的值，可直接这么写，也是最常用的写法

console.log($("form>select[name='demo3']").val());

本文章为重点说明 “:selected” 选择器的使用，请看下面的代码

var demo3=$("form>select[name='demo3']>option:selected");
    console.log(demo3.val());   //web
    console.log(demo3.html());  //web
    console.log(demo3.data("id"));  //web-7258

通过上面的代码能明显的知道，“:selected” 选择器 返回的确实是一个 DOM元素的JQuery对象，有兴趣的同学还可以阅读之前的文章[《jQuery 对象访问》][jQuery]中所介绍的 get() 方法来确认。

其实，如果当前下拉列表允许多选并当前有选中多个值时，“:selected” 选择器也会遇到不能正确获取值的问题，那么解决办法可一样通过遍历的方式来实现，或者直接获取这个下拉列表元素的 val() 值即可！

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 微信公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[jQuery _map]: https://blog.csdn.net/u013350495/article/details/82533549
[jQuery]: https://blog.csdn.net/u013350495/article/details/82533167
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220514/8f543181df9f4738a36418419a20172e.png