输入的用法：隐藏选择器答案

【问题标题】：Usage of input:hidden selector输入的用法：隐藏选择器
【发布时间】：2015-07-01 23:43:21
【问题描述】：

假设我们有两个带有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 类型吗？

【问题讨论】：

我不知道可能是什么问题，但我检查了您的代码，它的工作方式与您希望的一样..

标签： jquery jquery-selectors

【解决方案1】：

从docs 到:hidden 选择器：

选择所有隐藏的元素。

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

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

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

Fiddle example.

【讨论】：

【解决方案2】：

这将选择名称为“dv_1_radio_gender”的所有不可见的输入，无论它们是什么类型的输入：

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

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

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

【讨论】：