javascript - 如何通过 id 找到复选框并使用 JQuery 在字符串上应用属性？

Question

我有以下 html 字符串contentString：

var content = 
   '<div id="content">' +                        
    '<div>' +
      '<input name="tBox" id="select" type="checkbox" value="" '+
      'onclick="changeView()"> Select for operation' +
      '<p style="text-align:right"><a href="#">View details</a></p>' +
    '</div>' +
   '</div>';

在这里，我如何select通过 id 找到复选框并添加在功能上检查的属性changeView()？

function changeView(m) {                
   //find the select id from content string
  var checkbox = content.find($('#select'+m));
  // Apply the checked property on checkbox.
    checkbox.attr("checked","checked");
}

提前致谢。

Answer 1

如果先将其转换为 JQuery 对象，则可以这样做：

var contentObj = $(content);
var checkbox = contentObj.find("#select");
checkbox.attr("checked", true);

那么如果你需要它返回 html 字符串：

content = contentObj[0].outerHTML;

注意：如果outerHTML没有按预期工作，可以使用以下 JQuery 作为替代：

content = contentObj.clone().wrap('<div>').parent().html();

---

如果m是id你想要找到的（例如“选择”），那么使用这个：

var checkbox = contentObj.find("#" + m);

现场示例： 这是一个工作示例

---

以下是完整的功能，方便参考：

function changeView(m) {
    var contentObj = $(content);
    var checkbox = contentObj.find("#" + m);
    checkbox.attr("checked", true);
    content = contentObj[0].outerHTML;
}

Answer 2

简直就是这样

function changeView(m) {                
//find the select id from content string
var checkbox = content.find('#select');
// Apply the checked property on checkbox.
checkbox.attr("checked","checked");
}

如果你想传递 id 然后

function changeView(m) {                
//find the select id from content string
var checkbox = content.find("#" + m);
// Apply the checked property on checkbox.
checkbox.attr("checked","checked");
}

Answer 3

由于您使用的是 onclick 处理程序，因此您实际上不需要执行任何操作：

在 html 中：onclick="changeView(this);"

function changeView(box) {
   if(box.checked) { stuff; }
   // or get jquery ref to that box :
   $(box).prop("checked", true);
}

Answer 4

您需要先将字符串编译成 DOM 对象，方法是先将其包装在 jQuery 调用中。然后就可以使用 find 方法了。

所以：

var dom = $(content),
    select = dom.find('#select');

在任何情况下，都不需要添加'checked'属性，因为当你点击复选框时，它会自动变为选中状态。

但是，如果您仍想以编程方式检查它：

select.on('click', function () {
    this.attr('checked', 'checked');
});