Question

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

<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

来自:hidden <input>选择器：

选择隐藏的所有元素。

由于以下几个原因，可以将元素视为隐藏：

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

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

docs

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"]');

输入用法：隐藏选择器

2 个答案: