输入的用法:隐藏选择器

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示例。

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

Answer 1

来自:hidden选择器的文档：

选择所有隐藏的元素

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

1. 它们的CSS显示值为none
2. 它们是type="hidden"的表单元素
3. 它们的宽度和高度明确设置为0
4. 祖先元素是隐藏的，因此该元素不会显示在页面上

数字4就是一切：所有<input>都在隐藏的<div> s内。要只选择类型为hidden的<input>，可以使用input[type="hidden"]。

Fiddle示例。

Answer 2

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

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

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

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