Question

使用此html以编程方式创建表单的复选框：

<div class="checkbox"><label for="household_assistances_10"><input id="household_assistances_10" name="household[assistances][]" value="10" type="checkbox">Other</label></div>

假设id将是唯一的但是其数字（例如10）无法预测，那么如何确定是否可以检查该框？我尝试了各种各样的选择器，但还没有成功。

编辑：

显然我不清楚我需要关注显示为Other的复选框的状态。

Answer 1

我处理这个问题的方法是使用一个更改事件监听器来检查任何一个id为以＆household; family_assistances＆＃39;开头的复选框。并检查。要做到这一点，您将要使用带选择器的启动：

＆＃39; [ID ^ = household_assistances]＆＃39;

这将找到具有STARTS WITH household_assistances的Id的所有控件。然后，您可以仅使用选中的复选框进一步修改该选择器：

＆＃39; [ID ^ = household_assistances]：复选框：检查＆＃39;

这将返回任何复选框的控件，这些控件经过检查并且ID为＆＃39; household_assistances＆＃39;。

以下是此实现的外观的工作示例：

＆＃13;

$(document).on('change', '[id^=household_assistances]:checkbox:checked', function() {
		console.log(this.id);
        console.log(this.name)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkbox">
<label for="household_assistances_10">
<input id="household_assistances_10" name="household[assistances][]" value="10" type="checkbox">
Other
</label>
</div>

＆＃13;

希望有所帮助！

<强>更新

鉴于你需要通过文本找到控件＆＃34;其他＆＃34;在其中，我将使用以下选择器/函数：

$(document).on('change', 'label:contains("Other")', function() {    
    var id = $(this).find('input:checkbox');
    console.log(id[0].id);
    console.log(id[0].name);
});

这可以通过查找包含文本＆＃39;其他＆＃39;的标签元素，然后查看第一个复选框的标签元素。然后，您可以使用该复选框执行任何操作（请查看是否已选中，获取ID，名称等）...

请注意，这里有一些假设。如果有多个带有文本＆＃39;其他＆＃39;的标签，则会在每个标签上运行。此外，它假定您要查找的复选框始终是找到的标签内唯一的复选框。

您还希望编写一些内容来捕获未找到复选框的实例，否则会抛出写入的错误。

Answer 2

如果您对VanillaJS解决方案感兴趣，可以使用document.querySelectorAll。

// For the purpose of this example - attach click event to the button element
document.getElementById('button').addEventListener('click', function(event) {

  // Get all checkboxes
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');

  // Consider using map instead of forEach
  // Iterate over the checkboxes
  checkboxes.forEach(checkbox => {
  
    // Do something with each checkbox
    const isChecked = checkbox.checked;
    const id = checkbox.id;

    console.log(`Checkbox ${id} ${isChecked ? 'is' : 'is not'} checked`);
    
  });

});

<div class="checkbox">
  <label for="household_assistances_8">
    <input
      id="household_assistances_8" 
      name="household[assistances][]"
      value="10"
      type="checkbox"
    />
    Other
  </label>
  <label for="household_assistances_9">
    <input
      id="household_assistances_9" 
      name="household[assistances][]"
      value="9"
      type="checkbox"
    />
    Other
  </label>
  <label for="household_assistances_10">
    <input
      id="household_assistances_10" 
      name="household[assistances][]"
      value="10"
      type="checkbox"
    />
    Other
  </label>
  <input type="button" id="button" value="button"/>
</div>

Answer 3

复选框是否始终位于DOM树中的相同位置？

如果是这样，您可以使用CSS层次结构和伪选择器来检索第n个元素：

$("#myform div:nth(n) input")[0].checked

获取给定文本的复选框状态

3 个答案: