javascript - JQuery查找并更新子元素的属性然后返回父元素

Question

我有一个代表复选框的字符串，如下所示:

var checkbox = "<div class="text-center"><label for="cb_1"><input type="checkbox" id="cb_1"/></label></div>";

我想让复选框被选中(添加属性checked=“checked”)，使得字符串变成:

<div class="text-center"><label for="cb_1"><input type="checkbox" id="cb_1" checked="checked"/></label></div>;

我尝试过以下方法:

$(checkbox).find('input').attr('checked', true).end().html();

这将返回以下内容:

<label for="cb_1"><input type="checkbox" id="cb_1" checked="checked"/></label>

我的问题是为什么第一个 div 没有返回，我怎样才能返回整个内容，例如:

<div class="text-center"><label for="cb_1"><input type="checkbox" id="cb_1" checked="checked"/></label></div>;

Answer 1

jquery 中的

html() 使用 innerHTML 属性。在这种情况下，需要使用outerHTML，所以

尝试使用prop('outerHTML')

var checkbox = '<div class="text-center"><label for="cb_1"><input type="checkbox" id="cb_1"/></label></div>';

console.log($(checkbox).find('input').attr('checked', true).end().prop('outerHTML'))

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

引用

https://developer.mozilla.org/en-US/docs/Web/API/Element/outerHTML