javascript - 根据值和父 ID 选择复选框

Question

我正在使用 Tampermonkey 来检查复选框。它的布局方式是有多个“项目”，每个项目都有相同的复选框集。我正在尝试根据复选框值 和 ID(或者甚至标题，如果更理想的话)的组合预选复选框。

目前，如果我使用下面的选项，它会选中复选框，但当我需要为每个选项选择不同的选项时，它会为项目 1、项目 2、项目 3 等执行此操作。我想弄清楚如何根据 ID (122) 甚至标题(第 1 项)缩小选择范围？

$("input:checkbox[value='See Notes']").attr("checked", true);

这是我的 HTML 中每个项目的样子:

<div class="field tabular">
  <span class="item-data">{"Id":"122"}</span>
  <div class="field-content">
    <div class="title" title="Item 1">Item 1</div>
    <div class="data">
      <div class="errors"></div>
      <div class="control">
        <div class="option">
          <input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
          <label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
        </div>
        <div class="option">
          <input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
          <label for="checkbox_3668-1523196351429_option1">Repair Required</label>
        </div>
        <div class="option">
          <input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
          <label for="checkbox_3668-1523196351429_option2">See Notes</label>
        </div>
    <!-- Etc... -->

Answer 1

你可以这样做:

$('[title="Item 1"]')                                 //Select elemements with attribute title="Item 1"
       .next()                                        //Select the next element, which is div with class .data
       .find("input:checkbox[value='" + value + "']") //Find checkbox with the value
       .prop("checked", true);                        //Set the prop checked to true

这是一个片段:

var item = 'Item 1';
var value = 'See Notes';

$('[title="' + item + '"]').next().find("input:checkbox[value='" + value + "']").prop("checked", true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="field tabular">
  <span class="item-data">{"Id":"122"}</span>
  <div class="field-content">
    <div class="title" title="Item 1">Item 1</div>
    <div class="data">
      <div class="errors"></div>
      <div class="control">

        <div class="option">
          <input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
          <label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
        </div>

        <div class="option">
          <input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
          <label for="checkbox_3668-1523196351429_option1">Repair Required</label>
        </div>

        <div class="option">
          <input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
          <label for="checkbox_3668-1523196351429_option2">See Notes</label>
        </div>
      </div>
    </div>
  </div>
</div>

<br />
<br />

<div class="field tabular">
  <span class="item-data">{"Id":"123"}</span>
  <div class="field-content">
    <div class="title" title="Item 2">Item 2</div>
    <div class="data">
      <div class="errors"></div>
      <div class="control">

        <div class="option">
          <input id="checkbox_3668-1523196351429_option0" type="checkbox" value="Checked & Okay">
          <label for="checkbox_3668-1523196351429_option0">Checked & Okay</label>
        </div>

        <div class="option">
          <input id="checkbox_3668-1523196351429_option1" type="checkbox" value="Repair Required">
          <label for="checkbox_3668-1523196351429_option1">Repair Required</label>
        </div>

        <div class="option">
          <input id="checkbox_3668-1523196351429_option2" type="checkbox" value="See Notes">
          <label for="checkbox_3668-1523196351429_option2">See Notes</label>
        </div>
      </div>
    </div>
  </div>
</div>