How to add 'checked' attribute to HTML string (with nested tags) with jQuery, returning the whole string afterwards?

Question

I'm trying to add 'checked' attribute to HTML string, which contains multiple HTML tags.

let someBtn = `<div class='btn'><input type='checkbox' id='${item.Id}' 
                            value='Some value' class='active-btn'> <label class='btn' 
                            for='${item.id}'></label></div>`;```

Doing it this way:

var something = $($.parseHTML(someBtn)).find('input[type=checkbox]').attr('checked', 1).prop('outerHTML');

returns only the tag, not the whole updated HTML string. Also that input tag gets checked="checked" attribute instead of just checked. Why is that? I cannot use attr('checked', true) - there's no method with this kind of parameters.

Could somebody please help me out with this problem - to return the whole HTML string with proper checked attribute?

Also that input tag gets checked="checked" attribute instead of just checked. Why is that? — Because the browser normalises it and uses the full name=value and not the shorthand. — Quentin
– Quentin, Commented Apr 23, 2019 at 12:36

Kévin Bibollet · Accepted Answer · 2019-04-23 12:33:17Z

2

Useless to do $($.parseHTML('html_string')), you can directly use $('html_string').

You also need to seperate the fact to update your checkbox attributes and the fact to get the HTML.

const someBtn = `<div class='btn'><input type='checkbox' id='myId' 
                            value='Some value' class='active-btn'> <label class='btn' 
                            for='myId'></label></div>`;
                           
let html = $(someBtn);

html.find('input').attr('checked', 1);

html = html.prop('outerHTML'); // or html[0].outerHTML

console.log(html);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Apr 23, 2019 at 12:33

Kévin Bibollet

3,6331 gold badge17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

no use for a name Over a year ago

In my case prop() returns only the element selected by find().

Kévin Bibollet Over a year ago

That's why you need to divide some parts of your logic, as I did in my answer.

Collectives™ on Stack Overflow

How to add 'checked' attribute to HTML string (with nested tags) with jQuery, returning the whole string afterwards?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related