jQuery Pull Label for HTML Checkbox into Comma-Separated String

Question

I have an .aspx with multiple HTML checkboxes. I am trying to pull the value of all checked checkboxes into a comma-separated string. I can get the ID of the checkbox, but what I really want is the label text.

.aspx:

<div id="divIssueTypes">
    <label for="CDAccess">Access</label>
    <%: Html.CheckBox("CDAccess") %>
    
    <label for="CDReporting">Reporting</label>
    <%: Html.CheckBox("CDReporting") %>
    
    <label for="CDSeparatelyLocked">Separately locked (subject to abuse)</label>
    <%: Html.CheckBox("CDSeparatelyLocked") %>
    
    <label for="CDEmergencyAccess">Emergency access</label>
    <%: Html.CheckBox("CDEmergencyAccess") %>
    
    <label for="CDCounts">Counts</label>
    <%: Html.CheckBox("CDCounts") %>
    
    <label for="CDDisposition">Disposition</label>
    <%: Html.CheckBox("CDDisposition") %>
    
    <label for="CDDiversion">Diversion</label>
    <%= Html.CheckBox("CDDiversion") %>
</div>

jQuery:

var checkedVals = ($("#divIssueTypes").find('input:checkbox:checked').map( function() {
        return this.id;
    }).get().join(","));

If, for example, all checkboxes were checked my code would return: CDAccess,CDReporting,CDSeparatelyLocked,CDEmergencyAccess,CDCounts,CDDisposition,CDDiversion

But I would like it to return:
Access,Reporting,Separately locked (subject to abuse),Emergency access,Counts,Disposition,Diversion

Is this at all possible?

Does this answer your question? [Find html label associated with a given input](https://stackoverflow.com/questions/285522/find-html-label-associated-with-a-given-input) — Heretic Monkey, May 05 '23 at 14:50
Personally, I'd just use the `labels` property of the `input` element (`return this.labels[0].textContent`), but that's me. — Heretic Monkey, May 05 '23 at 14:51

score 0 · Accepted Answer · answered May 05 '23 at 14:42

You can use prev() and .text() which will get the value of label just above the checked checkbox or use this.id value like this $("label[for='" + this.id + "']") to get value of label.

Demo Code :

var checkedVals = ($("#divIssueTypes input:checkbox:checked").prev().map(function() {
  return $(this).text();
}).get().join(","));

console.log(checkedVals)

//or 

var checkedVals2 = ($("#divIssueTypes input:checkbox:checked").map(function() {
  return $("label[for='" + this.id + "']").text();
}).get().join(","));

console.log(checkedVals2)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divIssueTypes">
  <label for="CDAccess">Access</label>
  <input type="checkbox" id="CDAccess" value="CDAccess" checked>

  <label for="CDReporting">Reporting</label>
  <input type="checkbox" id="CDReporting" value="CDReporting" checked>

  <label for="CDSeparatelyLocked">Separately locked (subject to abuse)</label>
  <input type="checkbox" id="CDSeparatelyLocked" value="CDSeparatelyLocked" checked>

  <label for="CDEmergencyAccess">Emergency access</label>
  <input type="checkbox" id="CDEmergencyAccess" value="CDEmergencyAccess" checked>


</div>

Both options worked beautifully. Thanks! – MF Luder May 05 '23 at 15:09 — MF Luder, May 05 '23 at 15:09

jQuery Pull Label for HTML Checkbox into Comma-Separated String

1 Answers1