Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Put text at the right of checkbox

I try to build UI for labels and checkboxes dynamically

My idea is to build it like this

<div class="form-group col-lg-3 col-md-3 col-sm-6">
    <label for="HideVerifiedTickets" class="m-checkbox mt-35px">
        <input id="HideVerifiedTickets" class="filter" type="checkbox" name="HideVerifiedTickets" />
        HideVerifiedTickets
        <span></span>
    </label>
</div>

In the js file I wrote it like this

function renderCheckbox(ui, uiField, labelText, idField, nameOnForm){
    let id = abp.helper.getUniqueElementId();
    let container  = $('<div class="form-group col-lg-3 col-md-3 col-sm-6">');
    let label = $('<label class="m-checkbox mt-35px">').attr('for', idField).text(labelText);
    let checkbox = $('<input type="checkbox" class="filter">').attr('name', nameOnForm).attr('id', idField);
    checkbox.appendTo(label);
    let result = container.append(label);

    return result;
}

but the problem is that it generates HTML like this

enter image description here

How can I move text after the checkbox?

Tags:

2

Answers


  1. 0

    You can use .prependTo() rather than .appendTo() to put a check-box before the text.

    Also, you can do it in one go with .append()

    Instead of creating a new variable, assigning the whole HTML, and returning it, you can directly return the container variable that holds the desired HTML.

    So the code should be:

    function renderCheckbox(ui, uiField, labelText, idField, nameOnForm){
    let id = abp.helper.getUniqueElementId();
    let container  = $('<div class="form-group col-lg-3 col-md-3 col-sm-6">');
    let label = $('<label class="m-checkbox mt-35px">').attr('for', idField).text(labelText);
    let checkbox = $('<input type="checkbox" class="filter">').attr('name', nameOnForm).attr('id', idField);

    container.append(checkbox).append(label); 
    return container;
}

    Note:

    the first 2 parameters of the function are not used at all, so you can remove them.

    Also let id = abp.helper.getUniqueElementId(); seems to be of no-use so you can remove it too.

    Login or Signup to reply.
  2. 0

    You can create a textNode using the createTextNode() method and append it to the label just like you do with the checkbox.

    In the example I removed the for attribute and the ID for the input element because they are probably not needed.

    let cb1 = renderCheckbox(null, null, 'Test', 'test');

$(document.forms.form01).append(cb1);

function renderCheckbox(ui, uiField, labelText, nameOnForm) {
  let container = $('<div class="form-group col-lg-3 col-md-3 col-sm-6">');
  let label = $('<label class="m-checkbox mt-35px">');
  let checkbox = $('<input type="checkbox" class="filter">').attr('name', nameOnForm);
  checkbox.appendTo(label);
  let text = $(document.createTextNode(labelText));
  text.appendTo(label);
  let result = container.append(label);

  return result;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form name="form01">
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search