选择所有被选中的表单元素以及不可选择的表单元素

Posted 2023-05-09

【中文标题】选择所有被选中的表单元素以及不可选择的表单元素

【英文标题】：select all form elements that are selected as well as non-selectable form elements

【发布时间】：2016-10-12 01:02:51

【问题描述】：

我的标记看起来像这样：

<form>
  <select class="form-control" id="follower_id" name="event[task_followers_attributes][0][follower_id]">
    <option value=""></option>
    <option data-typeahead-associated-id="1" value="1" selected>Administrator</option>
    <option data-typeahead-associated-id="2" value="2">Marketing Guy</option>
  </select>
  <input type="hidden" data-typeahead-associated-id="2" name="event[followers_attributes][1][id]" value="2">  
</form>

我想查找所有具有数据属性“data-typeahead-associated-id”的表单元素。但是，如果表单元素是可选择的表单元素（例如，选择、单选按钮），那么我只想要被选中的表单元素的 data-typeahead-associated-id。由于输入字段没有多个选项，我希望所有输入字段都匹配“data-typeahead-associated-id”属性。

因此，在上面的示例中，我希望选择选项的值为 1，而不是 2。我还希望输入字段的值为 2。

我想出了这个解决方案，似乎可行：

$('form').find('[data-typeahead-associated-id]').not('option:not(:selected),input[type="radio"]:not(:checked),input[type="checkbox"]:not(:checked)')

但是有没有更稳定、更优雅的解决方案？

【参考方案1】：

我不知道这个解决方案是否更有效。 但我注意到你使用了一个双 not 指令，它是一个 afermative 指令。

我的解决方案是分成两个更简单的指令。 首先选择带有[data-typeahead-associated-id]的所有元素 根据您的喜好进行第二次筛选（:selected、:checked、:input） 通过这种方式，您可以更好地控制元素。

试试：

var elements = $('form').find('[data-typeahead-associated-id]');
var result = elements.filter(":selected, :checked, :input");

//Following is only to display results
$.each(result, function(index, value)
$('#result').append("<p>Index: " + index + " | Element: " + value + " | Value: " + $(value).val() +"</p>"););

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select class="form-control" id="follower_id" name="event[task_followers_attributes][0][follower_id]">
    <option value=""></option>
    <option data-typeahead-associated-id="1" value="1" selected>Administrator</option>
    <option data-typeahead-associated-id="2" value="2" >Marketing Guy</option>
  </select>
  <input type="hidden" data-typeahead-associated-id="2" name="event[followers_attributes][1][id]" value="2">  
</form>

<!-- Following is only to display results -->
<div id="result">
</div>