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

这是一个片段：

＆＃13;

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

＆＃13;

<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>

＆＃13;

根据值和父ID选择复选框

1 个答案: