根据值和 Parent ID 选择复选框

Question

我正在使用 Tampermonkey 来检查复选框。它的布局方式是有多个 'Items'，每个都有相同的复选框集。我正在尝试根据复选框值和 ID（甚至标题，如果更理想的话）的组合来设置复选框 pre-selected。

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

$("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>

根据值和 Parent ID 选择复选框

Selecting Checkboxes Based on Value and Parent ID

html

javascript

jquery

userscripts

tampermonkey