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

How I find the checkbox by id and apply attribute on string using JQuery?

本文关键字：JQuery 字符串 属性 应用 何通过 id 复选框      更新时间：2023-09-26

我有以下 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>';

在这里，我如何找到按 id select复选框并添加在函数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");
}

提前谢谢。

如果你先把它转换成一个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;
}

您需要先将字符串包装在 jQuery 调用中，将其编译为 DOM 对象。然后，您可以使用查找方法。

所以：

var dom = $(content),
    select = dom.find('#select');
在任何情况下，都

不需要添加"选中"属性，因为当您单击复选框时，它将自动变为选中状态。

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

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

就像这样

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");
}

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

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

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