如何使用jQuery将'checked'属性添加到HTML字符串(带有嵌套标签)，然后返回整个字符串？

Question

我正在尝试将"checked"属性添加到包含多个HTML标签的HTML字符串中。

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>`;```

这样做：

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

仅返回标记，而不返回整个更新的 HTML 字符串。此外，该输入标签获得checked="checked"属性，而不仅仅是checked。为什么？我不能使用attr('checked', true) - 没有具有这种参数的方法。

有人可以帮助我解决这个问题 - 返回带有正确检查属性的整个 HTML 字符串吗？

Answer 1

做

$($.parseHTML('html_string'))没用，可以直接使用$('html_string')。

您还需要将更新复选框属性的事实和获取 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>