使用 JavaScript 或 jQuery 按值获取字段集的输入

Question

我需要检查字段集中的特定输入，其中的元素仅由不同的值定义：

      <fieldset class="collapsible">
        <legend onclick="toggleFieldset(this);">Opzioni</legend>
        <div style="">
          <table class="options">
                <td class="card-fields">
                    [...]
                    <label class="floating"><input type="checkbox" name="f_status[]" id="f_status_" value="5" />Chiuso</label>
                    <label class="floating"><input type="checkbox" name="f_status[]" id="f_status_" value="6" />Rifiutato</label>
                    [...]
      </fieldset>

我在 jQuery 中尝试了很多方法，例如：

$("#f_status_").each(function(){
   if (this.value == 2) {
      this.trigger("click");
   }
})

但运气不好。有帮助吗？

谢谢。

Answer 1

您不能将相同的 id 重复用于多个元素。那是 HTML 的犯罪行为。使用类代替并使用 .each() 和 .trigger() 工作，将其包装在 $():

$(function() {
  $(".f_status_").each(function() {
    if (this.value == 5) {
      $(this).trigger("click");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="floating"><input type="checkbox" name="f_status[]" class="f_status_" value="5" /> Chiuso</label>
<label class="floating"><input type="checkbox" name="f_status[]" class="f_status_" value="6" /> Rifiutato</label>

$(function() {
  $(".f_status_").each(function() {
    if (this.value == 6) {
      $(this).trigger("click");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="floating"><input type="checkbox" name="f_status[]" class="f_status_" value="5" /> Chiuso</label>
<label class="floating"><input type="checkbox" name="f_status[]" class="f_status_" value="6" /> Rifiutato</label>

万一，如果你不能改变 HTML，我完全不同意，因为这是错误的 HTML，你可以这样做：

$(function() {
  $('[name="f_status[]"]').each(function() {
    if (this.value == 6) {
      $(this).trigger("click");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="floating"><input type="checkbox" name="f_status[]" id="f_status_" value="5" /> Chiuso</label>
<label class="floating"><input type="checkbox" name="f_status[]" id="f_status_" value="6" /> Rifiutato</label>

反正我永远不会推荐这种方法。

Answer 2

编辑：使用@Praveen Kumar Purushothaman 的回答。

首先，您不应在每个文档中多次使用 id。

至于您的 JavaScript 代码：<input> 的 value 返回为 String，而不是 Number。另外，如果要使用 trigger，则必须将元素包装在 jQuery 集合中。请参阅下面的工作示例：

$('.card-fields_input').each(function() {
  if (this.value === '2') {
    $(this).trigger('click');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset class="collapsible">
  <legend onclick="toggleFieldset(this);">Opzioni</legend>
  <div style="">
    <table class="options">
      <tr>
        <td class="card-fields">
          <label class="floating">
            <input type="checkbox" name="f_status[]" class="card-fields_input" value="1" />
            Chiuso
          </label>
          <label class="floating">
            <input type="checkbox" name="f_status[]" class="card-fields_input" value="2" />
            Rifiutato
          </label>
        </td>
      </tr>
    </table>
  </div>
</fieldset>

使用 JavaScript 或 jQuery 按值获取字段集的输入

Getting input of fieldset by value with JavaScript or jQuery

javascript

jquery

html

fieldset