“Select All” functionality in Choice column

Question

In SPO, I have a multi-select choice (check box column)column named "Geography" which lists different cities.

I also added a choice to the "Geography" column named "Select All", when the value "Select All" is checked, all other values in the choice column also should be checked.

I got the below 2 articles providing solutions to my requirement. But as stated in this articles, my different choice values don't have a"class" value rather have only "id" value. Because of this the Jquery is not working.

Select All check-boxes in choice field on document library form using jquery

https://jsfiddle.net/ybyjh1tw/

Below is the code I see in my SharePoint form.There is no class value for each choice and I cannot add one ,since it is a OOB form.

<table id="Geography_MultiChoiceTable">
<tbody>
<tr>
<td>
<span title="SelectAll" class="ms-RadioText"><input 
id="Geography_MultiChoiceOption_0" type="checkbox">
SelectAll
</span>
</td>
</tr>
<tr>
<td>
<span title="United States" class="ms-RadioText"><input 
id="Geography_MultiChoiceOption_1" type="checkbox">
United States
</span>
</td>
</tr>
<tr>
<td>
<span title="Canada" class="ms-RadioText"><input 
id="Geography_MultiChoiceOption_2" type="checkbox">
Canada
</span>
</td>
</tr>
<tr>
<td>
<span title="Europe" class="ms-RadioText"><input 
id="Geography_MultiChoiceOption_3" type="checkbox">
Europe
</span>
</td>
</tr>
</tbody>
</table>

I have the below Jquery which is looking for a class name to work correctly. I have to replace "checkbox1" with the class name but I don't have a class name in my form.

$(document).ready(function () {
$('#SelectAll').click(function (event) { //on click 
    if (this.checked) { // check select status
        $('.checkbox1').each(function () { //loop through each checkbox
            this.checked = true; //select all checkboxes with class "checkbox1"               
        });
    } else {
        $('.checkbox1').each(function () { //loop through each checkbox
            this.checked = false; //deselect all checkboxes with class "checkbox1"                       
        });
    }
});

});

Answer 1

$(document).ready(function () {
     $("span[title='SelectAll'] input").click(function (event) { //on click 
          $("input[id^='Geography_']").prop("checked", this.checked);
      });
});

This is more to selecting element In jquery, what I've done here is finding element span with title "SelectAll" and attach a click event in input element inside that span. Then inside the event I find all input with id starting with 'Geography_' and change it checked property to this.checked.