Selecting Checkboxes Based on Value and Parent 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).

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

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

回答1:

You can do something like:

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

Here is a snippet:

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>

来源：https://stackoverflow.com/questions/49718885/selecting-checkboxes-based-on-value-and-parent-id

标签

javascript

jquery

html

userscripts

tampermonkey