Check Common Dropdown Items (JavaScript, jQuery)

Question

I'm a beginner in coding, and I need some help with the following code.

So I have a page like the following one in the example.

So far, I tried the following method. (Please check my code and live example)

With my current method to select the checkboxes, I have to write code for each and every option like this.

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

Is there any simpler way to do this? for an example can we just select every one which contains us_, as_, eu part without assigning unique values to every option. Any assistance you can provide would be greatly appreciated.

$("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

Sure you can! Instead of accessing elements by their IDs (which have to be unique), give them all a common class and grab them by that instead.

So elements that look like this:

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

Get an additional class prop, like this:

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

Then you can update their props in batch like this:

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

Answer 2

Without modifying your current HTML you can select all elements wich class contains a string with:

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

and changed their checkbox value like this:

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

then change us for whatever word you want.

Answer 3

There are several ways you can do this using either JavaScript or jQuery.

You could use the attribute contains selector to find all elements with an id that matches a pattern:

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

This form of selector also works with JavaScript's native document.querySelector() method.

However, this runs the risk of unintentionally selecting irrelevant elements that happen to match the selector. The selector above would also match an element with an id of "status_code", for example.

A better approach is the one that @jonny suggests in his answer. While the id attribute of every element in a document has to be unique, other attributes like "class" do not. This allows you to assign a css class name to a group of related elements and select them by that class name using the class selector. (Again, this selector also works with the document.querySelector method).

Personally, I dislike using css class names to select related groups of elements because css classes are for styling, not for functionality. So another approach you can use if you want to keep style an function separate is to include data attributes like so:

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

You can then use the attribute selector to select both inputs:

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