根据值和家长ID选择复选框 [英] Selecting Checkboxes Based on Value and Parent ID

问题描述

我使用Tampermonkey检查复选框。它的布局方式是有多个'Items'，每个都有相同的复选框。我试图根据复选框值和 ID的组合（或者甚至标题，如果这更理想）预选复选框。

I'm using Tampermonkey to check checkboxes. The way it's laid out is there's multiple 'Items', each with the same set of checkboxes. I'm trying to have the checkbox pre-selected based on a combination of the checkbox value and the ID (or even title, if that's more ideal).

目前如果我使用下面的内容，它会选中复选框，但是当我需要为每个选项选择不同的选项时，它会为项目1，项目2，项目3等等这样做。我试图弄清楚如何缩小基于ID（122）甚至标题（Item 1）的选择？

Currently if I use the below, it will select the checkbox but it will do so for Item 1, Item 2, Item 3 and so on when I need to select different options for each. I'm trying to figure out how I go about narrowing the selection based on the ID (122) or even the title (Item 1)?

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

这就是我的HTML对每个项目的样子：

This is what my HTML looks like for each item:

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

推荐答案

您可以这样做：

$('[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>

这篇关于根据值和家长ID选择复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！