在 javascript 中為 innerHTML 添加一個復選框

Question

我有一個包含 10 個項目（格式化列表）的頁面。在此頁面中，我需要為每個項目添加復選框，並將該項目作為值添加到每個復選框。當用戶單擊復選框時，選定的值應該傳遞到新頁面。任何人都可以幫助我如何在 java 腳本中為 innerHTML 添加復選框。

代碼：

  var newsletter=document.getElementById("block-system-main");
    var districolumn=getElementsByClassName('view-id-_create_a_news_letter_',newsletter,'div'); 
  if(districolumn!=null)
 {
  var newsletterall=newsletter.getElementsByTagName('li');
 alert(newsletterall[0].innerHTML);
 var all=newsletter.innerHTML;
newsletter.innerHTML="<input type='button' onclick='changeText()' value='Change Text'/>";
}
    function changeText()
    {
       alert("dfgsdg");
    }

Answer 1

我不完全了解您的代碼的每個部分在做什么，但我會嘗試給出一個一般性的答案：

在您的 HTML 中，執行如下操作：

<form id="myForm" action="nextPage.com">
    <div id="Boxes"></div>
</form>

將以上名稱更改為您希望寫入復選框的任何位置。

還有你的 function：

function changeText()
{
    for(var i=0 ; i < newsletterall.length ; i++)
    {
        var inner = document.getElementById("Boxes").innerHTML;
        var newBox = ('<input type="checkbox" name="item[]" value="' + newsletter[i] + '>' + newsletterall[i]);
        document.getElementById("Boxes").innerHTML = inner + newBox;
    }
document.getElementById("myForm").submit();
}

最后一行代碼自動提交復選框。 如果您不希望這樣，請刪除該行，然后向表單myForm添加一個提交按鈕。

Answer 2

$('ul​​​#list li').each(
    function() {
        var me = $(this),
            val = me.html(),
            ckb = $('<input type="checkbox" />');

        ckb.click(function() {
            var where=val;
            window.location.href='http://google.com/?'+where; 
        });

        me.html('');
        me.append(ckb).append($('<span>'+val+'</span>'));
    }
);​​​​