How to pass selected text of checkbox to action result on razor page?

Question

I work on asp.net core razor page . I pass selected id as array success

but my issue selected text value for check box not passed or displayed

Issue happen on this line selectedClassText.push($(this).next('label').text());

when debug action result string[] classidsText it display null .

Exactly i need to pass selected text beside checkbox as array.

razor page .cs that get class id text

    public JsonResult OnGetSubAccountClassName(string[] classIds,string[] classidsText)
{
    var assetsSubAccountName = _IAssetsService.GetJdeAssetSubAccountClassName(classIds);
    AssetCountGeneration.JDEAssetSubAccountClassNameDetails = assetsSubAccountName;
    return new JsonResult(assetsSubAccountName);
}

from jQuery ajax on page cshtml i send selected displayed text by selectedClassText

    $(document).on('change', '.classCheckbox', function () {
      var selectedClassIds = [];
      var selectedClassText = [];
$('.classCheckbox:checked').each(function () {
    selectedClassIds.push($(this).val());
    selectedClassText.push($(this).next('label').text());
});
      console.log("selected items" + selectedClassIds)
      if (selectedClassIds.length > 0) {
          $.ajax({
              url: '?handler=SubAccountClassName',
              type: 'GET',
              traditional: true,
              data: { classIds: selectedClassIds,classidsText:selectedClassText },
              success: function (response) {
                  $('#subClassesList').empty();
                  $('#subClassesContainer').show();
                 
                  var subClassesContainer = $('<div data-class-id="' + selectedClassIds + '"></div>');
                  $.each(response, function (i, item) {
                      $(subClassesContainer).append('<input type="checkbox" class="subclassCheckbox" name="selectedSubClasses" value="' + item.subClassAccountId + '" /> ' + item.subClassAccountName + '<br />');
                  });
                  $('#subClassesList').append(subClassesContainer);
              }
          });

Updated post

I try code below but not worked so how to solve this issue console.log() and it give me null

when create checkbox list before make change event

i create it as below

$('#btnDisplay').click(function (event) {
      event.preventDefault();
      var dropdown = $('#accountclassname-select');
      dropdown.empty();
    
      $.ajax({
          url: '?handler=AccountClassName',
          type: "GET",
          dataType: "json",
          success: function (response) {
              $('#classesContainer').show();
              $('#classesList').html(''); // Clear existing classes
              $('#classesList').append('<input type="checkbox" class="classCheckbox" value="0" /> All <br />');
              $.each(response, function (i, classes) {
                  $('#classesList').append('<input type="checkbox" class="classCheckbox" value="' + classes.classAccountId + '" /> ' + classes.classAccountName + '<br />');
              });
             
          }
      });
  }); 

Important notes

I don't have label to append text on it

i create list as below

$(subClassesContainer).append('<input type="checkbox" class="subclassCheckbox" name="selectedSubClasses" value="' + item.subClassAccountId + '" /> ' + item.subClassAccountName + '<br />');
                      });

Answer 1

Try Like This

You can pass the label text with custom attributes in the input like this

<input type="checkbox" class="classCheckbox" value="' + classes.classAccountId + '" data-label="'+ classes.classAccountName +'"/> ' + classes.classAccountName + '<br />

After that you can get the value of custom attribute (label text) like this in your loop and push its value in array

var selectedText = $(this).attr("data-label");
selectedClassText.push(selectedText);