Modity HTML的複選框

Question

我公司目前擁有jQuery中下列函數返回正確的一組信息：

function checkAllPriceBuilderBoxes() { 
    var contentzz = $("#props #itemEditor #builderItemsList .listItem .controlCtr").html(); 
    console.log(contentzz) 
} 

contentzz返回下面的HTML：

<input class="control" style="" type="checkbox" _type="checkbox" value="No"> 

我期待修改這個html在html末尾添加'checked'文本：

<input class="control" style="" type="checkbox" _type="checkbox" value="No" checked> 

我嘗試了以下方法，但不起作用。

$(contentzz).append("checked"); 

想法？

Answer 1

您需要將元素添加到元素。使用.attr()：

$(contentzz).attr("checked",true); 

如果你想添加的屬性後，修改後的字符串，那麼你需要覆蓋contenzz字符串修改字符串元素。

contentzz = $(contentzz).attr('checked',true)[0].outerHTML; 

Answer 2

使用查找功能，改變DOM元素在頁面上而不是HTML字符串：

var contentzz = $("#props #itemEditor #builderItemsList .listItem .controlCtr").find('.control'); 
console.log(contentzz[0]); 
contentzz.attr('checked','checked'); 
console.log(contentzz[0]); 

var contentzz = $(".controlCtr").find('.control'); 
 
    console.log(contentzz[0]); 
 
    contentzz.attr('checked','checked'); 
 
    console.log(contentzz[0]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="controlCtr"> 
 
<input type="checkbox" class="control"> 
 
</div>

Answer 3

您需要使用.attr(attributeName, value)添加checked屬性並使用.prop(propertyName)來獲得outerHTML屬性。

var contentzz = '<input class="control" style="" type="checkbox" _type="checkbox" value="No">'; 
 
contentzz = $(contentzz).attr("checked",true).prop('outerHTML'); 
 
console.log(contentzz)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 4

var contentzz = '<input class="control" style="" type="checkbox" _type="checkbox" value="No">'; 
 
contentzz = $(contentzz).attr("checked",true).prop('outerHTML'); 
 
console.log(contentzz)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 5

在jQuery中檢查所有的複選框的優選方式是：

$(SELECTOR).prop("checked", true); 

如果使用jQuery預1.6則：

$(SELECTOR).attr("checked", true); 

使用JavaScript，您必須遍歷複選框的NodeList/HTML集合或將NodeList轉換爲真數組。在每個迭代上使用：

OBJECT.setAttribute('checked', true); 

下面的代碼段有兩個功能：checkAllvJQ()和checkAllvJS()。他們都分別檢查給定jQuery和JavaScript對象的所有複選框。

代碼片段

$('#btn1').on('click', function() { 
 
    checkAllvJQ("#builderItemsList .listItem .controlCtr input"); 
 
}); 
 

 
function checkAllvJQ(target) { 
 
    var tgt = $(target); 
 
    tgt.prop("checked", true); 
 
} 
 

 

 
var btn2 = document.getElementById('btn2'); 
 

 
btn2.addEventListener('click', function() { 
 
    checkAllvJS("#builderItemsList .listItem .controlCtr input"); 
 
}, false); 
 

 
function checkAllvJS(target) { 
 
    var tgt = document.querySelectorAll(target); 
 
    Array.from(tgt, input => input.setAttribute('checked', true)); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<main id='props'> 
 
    <form id="itemEditor"> 
 
    <button id='btn1'>checkAllvJQ</button> 
 
    <button id='btn2'>CheckAllvJS</button> 
 
    <fieldset id="builderItemsList"> 
 
     <ul class='listItem'> 
 
     <li class="controlCtr"> 
 
      <input class="control" style="" type="checkbox" data-type="checkbox" value="No"> 
 
      <input class="control" style="" type="checkbox" data-type="checkbox" value="yes"> 
 
      <input class="control" style="" type="checkbox" data-type="checkbox" value="maybe"> 
 
     </li> 
 
     </ul> 
 
     <ul class='listItem'> 
 
     <li class="controlCtr"> 
 
      <input class="control" style="" type="checkbox" data-type="checkbox" value="No"> 
 
      <input class="control" style="" type="checkbox" data-type="checkbox" value="yes"> 
 
      <input class="control" style="" type="checkbox" data-type="checkbox" value="maybe"> 
 
     </li> 
 
     </ul> 
 
     <ul class='listItem'> 
 
     <li class="controlCtr"> 
 
      <input class="control" style="" type="checkbox" data-type="checkbox" value="No"> 
 
      <input class="control" style="" type="checkbox" data-type="checkbox" value="yes"> 
 
      <input class="control" style="" type="checkbox" data-type="checkbox" value="maybe"> 
 
     </li> 
 
     </ul> 
 
    </fieldset> 
 
    </form> 
 
</main>