input:hidden 选择器的用法

Question

假设我们有两个具有 display:none 样式属性的 div，如下所示：

<div id="dv_1" style="display:none;">
    DIV - 1
    <br />
    <input type="radio" name="dv_1_radio_gender" value="male" checked="checked" /> Male
    <input type="radio" name="dv_1_radio_gender" value="female" /> Female
    <input type="hidden" name="dv_1_radio_gender" value="male" />
</div>

<div id="dv_2" style="display:none;">
    DIV - 2
    <br />
    <input type="radio" name="dv_2_radio_gender" value="male" checked="checked" /> Male
    <input type="radio" name="dv_2_radio_gender" value="female" /> Female
    <input type="hidden" name="dv_2_radio_gender" value="male" />
</div>

如您所见，每个 div 包含两个单选按钮和一个隐藏的 input 字段。

如果我们尝试像这样为隐藏字段设置新值：

$('input:hidden[name="dv_1_radio_gender"]').val('female');

选择器似乎在隐藏 (display: none) div 中获取所有具有相同名称的元素并将值设置为 'female'.

如果我们首先更改 div：

$(div).show();

Е如果一切正常。

JSFiddle example.

所以，我的问题是：为什么选择器会在隐藏 div 中获取所有匹配的元素？语法 $('input:hidden[name="xxx"]') 不是要查找 input 类型的 hidden 吗？

Answer 1

从 docs 到 :hidden select 或：

选择所有隐藏的元素。

元素可以被认为是隐藏的有几个原因：

它们的 CSS 显示值为 none。
它们是 type="hidden".
它们的宽度和高度明确设置为 0。
祖先元素被隐藏，因此该元素未显示在页面上。

数字 4 的全部内容：所有 <input> 都隐藏在 <div> 中。要 select 仅 <input> 类型 hidden，您可以使用 input[type="hidden"].

Fiddle example.

Answer 2

这将 select 所有名称为 "dv_1_radio_gender" 且不可见的输入，无论它们是哪种输入：

$('input:hidden[name="dv_1_radio_gender"]');

第二个将 select 所有名称为 "dv_1_radio_gender" 的隐藏类型的输入，无论它们是否在隐藏的父元素内：

$('input[type="hidden][name="dv_1_radio_gender"]');

input:hidden 选择器的用法

Usage of input:hidden selector

jquery

jquery-selectors