“Select All” functionality in Choice column
-
30-01-2021 - |
题
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
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"
});
}
});
});
解决方案
$(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.