javascript - 检查常见下拉项(JavaScript、jQuery)

Question

我需要有关以下代码的帮助。

所以我有一个类似于示例中的页面。

到目前为止，我尝试了以下方法。 (请检查我的代码和实例)

使用我当前选择复选框的方法，我必须为每个选项编写代码，如下所示。

$("#check_us, #check_us-1, #check_us-2").prop("checked", !0)

有没有更简单的方法来做到这一点？举个例子，我们是否可以只选择包含 us_, as_, eu 部分的每个选项，而不为每个选项分配唯一值。如果您能提供任何帮助，我们将不胜感激。

$("button.select-all").on("click", selectAll);

function selectAll() {
    $(".schoolareas").toArray().forEach(function (a, c, b) {
        $("#check_" + a.id).prop("checked", !0)
    })
}
$("button.unselect-all").on("click", unselectAll);

function unselectAll() {
    $(".schoolareas").toArray().forEach(function (a, c, b) {
        $("#check_" + a.id).prop("checked", !1)
    })
}

$("button.select-us").on("click", selectAmerica);

function selectAmerica() {
    unselectAll();
    $(".schoolareas").toArray();
    $("#check_us, #check_us-1, #check_us-2").prop("checked", !0)
}
$("button.select-eu").on("click", selectEurope);

function selectEurope() {
    unselectAll();
    $(".schoolareas").toArray();
    $("#check_eu, #check_eu-1").prop("checked", !0)
}


$("button.select-as").on("click", selectAsia);
function selectAsia() {
    unselectAll();
    $(".schoolareas").toArray();
    $("#check_as, #check_as-1").prop("checked", !0)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid py-4">
  <div class="row text-center">
    <div class="col-8 offset-2">
      <div class="btn-groups">
        <button class="btn btn-primary select-all">Select All</button>
        <button class="btn btn-primary unselect-all">Unselect All</button>
        <button class="btn btn-primary" id="latencybutton">Count</button>
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Country/Area</button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
          <button class="dropdown-item select-us" type="button">America</button>
          <button class="dropdown-item select-eu" type="button">Europe</button>
          <button class="dropdown-item select-as" type="button">Asia</button>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container col-8 offset-2">
  <div class="table-responsive  shadow p-3 mb-5 bg-light rounded text-xs-center">
    <table id="grid" class="table table-hover">
      <thead class="thead-dark">
        <tr>
          <th data-type="string">?</th>
          <th data-type="string">Locations:</th>
          <th data-type="number">Scores:</th>
          <th data-type="number">Average:</th>
          <th class="thmw" data-type="string">Score Status:</th>
        </tr>
      </thead>
      <tbody>

        <tr>
          <td>
            <input type="checkbox" id="check_eu" checked />
            <label for="check_eu"></label>
          </td>
          <td>London (EU)</td>
          <td class="schoolareas" id="eu"></td>
          <td></td>
          <td class="status"></td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" id="check_eu-1" checked />
            <label for="check_eu-1"></label>
          </td>
          <td>Manchester (EU)</td>
          <td class="schoolareas" id="eu-1"></td>
          <td></td>
          <td class="status"></td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" id="check_us" checked />
            <label for="check_us"></label>
          </td>
          <td>New York (US)</td>
          <td class="schoolareas" id="us"></td>
          <td></td>
          <td class="status"></td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" id="check_us-1" checked />
            <label for="check_us-1"></label>
          </td>
          <td>California (US)</td>
          <td class="schoolareas" id="us-1"></td>
          <td></td>
          <td class="status"></td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" id="check_us-2" checked />
            <label for="check_us-2"></label>
          </td>
          <td>Florida (US)</td>
          <td class="schoolareas" id="us-2"></td>
          <td class="status"></td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" id="check_as" checked />
            <label for="check_as"></label>
          </td>
          <td>Singapore (AS)</td>
          <td class="schoolareas" id="as"></td>
          <td class="status"></td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" id="check_as-1" checked />
            <label for="check_as-1"></label>
          </td>
          <td>China (AS)</td>
          <td class="schoolareas" id="as-1"></td>
          <td class="status"></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer 1

当然可以!不要通过 ID 来访问元素(ID 必须是唯一的)，而是为它们提供一个公共(public)类，然后通过该类来获取它们。

所以元素看起来像这样:

<input type="checkbox" id="check_us-1" checked />
<input type="checkbox" id="check_us-2" checked />

获取一个额外的类 Prop ，如下所示:

<input type="checkbox" id="check_us-1" class="us" checked />
<input type="checkbox" id="check_us-2" class="us" checked />

然后你可以像这样批量更新他们的 Prop :

$(".us").prop("checked", !0)