Проверьте общие выпадающие элементы (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

Без изменения текущего HTML-кода вы можете выбрать все элементы, класс которых содержит строку с:

$('checkbox[class^="us"]')

и изменили значение их флажка следующим образом:

$('checkbox[class^="us"]').prop("checked", !0)

, затем измените нас наКакое бы слово вы ни выбрали.

Answer 2

Конечно, вы можете! Вместо того, чтобы обращаться к элементам по их идентификаторам (которые должны быть уникальными), дайте им всем общий класс и возьмите их вместо этого.

Итак, элементы, которые выглядят так:

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

Получить дополнительный класс поддержки, как это:

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

Затем вы можете обновить их реквизиты в пакетном режиме, как это:

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

Answer 3

Есть несколько способов сделать это с помощью JavaScript или jQuery.

Вы можете использовать атрибут , содержащий селектор , чтобы найти все элементы с идентификатором, который соответствует шаблону:

$('[id*="us_"]').prop('checked', true);

Эта форма селектора также работает с нативным методом JavaScript document.querySelector().

Однако существует риск непреднамеренного выбора нерелевантных элементов, которые соответствуют селектору,Вышеупомянутый селектор также будет соответствовать элементу с идентификатором «status_code», например.

Лучшим подходом является тот, который предлагает @jonny в своем ответе. В то время как атрибут id каждого элемента в документе должен быть уникальным, другие атрибуты, такие как «класс», - нет. Это позволяет назначить имя класса css группе связанных элементов и выбрать их по имени этого класса с помощью селектора class . (Опять же, этот селектор также работает с методом document.querySelector ).

Лично мне не нравится использовать имена классов css для выбора связанных групп элементов, потому что классы css предназначены для стиля, а не дляфункциональность. Поэтому другой подход, который вы можете использовать, если хотите сохранить стиль функции отдельно, состоит в том, чтобы включить атрибуты данных , например, так:

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

Затем вы можете использовать селектор атрибутов, чтобы выбрать оба входа:

$('[data-group="us"]').prop('checked', true);