Question

我是html的新手，可以通过youtube等学习。我正在编写一个JavaScript，它允许我显示一个自定义窗口，其中带有复选框和texbox（以及标签）。我从一开始就不考虑这些文本框，但是我希望在选中对应复选框时能使它们生效。

我已经在互联网上搜索了一种解决方案，已经尝试使用：document.getElementById('chb1').onclick = function() { //my function }; 或

document.getElementById('chb1').onclick = //my function;

但它们都不起作用。

function MyCheckboxWindow()
{
    this.render = function(func,titel,dialog,checktext1)
    {

        var dialogboxbody = document.getElementById ('dialogboxbody');
        dialogboxbody.innerHTML = dialog + ': <br>';

        if(checktext1 != null) 
        {

            dialogboxbody.innerHTML +='<br><input type="checkbox" id="chb1"><label for="chb1" class="lbl" id="lbl1"></label>'
            + '<label for="txt1">&#8364;</label> <input type="text" id="txt1" value="0,00" disabled>';
            document.getElementById('lbl1').innerHTML = checktext1 + ': ';
            document.getElementById('chb1').onclick = alert('');

        }
        else if(!checkboxCheck)
        {

            dialogboxbody.innerHTML +='<br><input type="checkbox" id="chb1"><label for="chb1" class="lbl" id="lbl1"></label>'
            + '<label for="txt1">&#8364;</label> <input type="text" id="txt1" value="0,00" disabled>';
            document.getElementById('lbl1').innerHTML = "Other: : ";
            document.getElementById('chb1').onclick = Change.ischanged('chb1');
            checkboxCheck = true;

        }

        document.getElementById('dialogboxfoot').innerHTML = '<button onclick="CheckboxWindow.ok(\''+func+'\')">Ok</button> <button onclick="CheckboxWindow.cancel()">Cancel</button>';

    }

}
var CheckboxWindow = new MyCheckboxWindow();

function CheckboxChanged()
{

    this.ischanged(id)
    {

        alert('');

    }

}
var Change = new CheckboxChanged();

仅出于信息目的，应该有6个这些复选框，但在本示例中，我将其省略。另外，在“如果”中，我用警报替换了函数。仅当我打开自定义窗口时，if子句中的代码才会生成一个警报框，单击该复选框不会执行任何操作（但请选中该框）。

像在此示例中的“ else if”中一样进行编写，根本不会产生任何结果，function（）{Change.ischanged（'chb1'）; }（就像我之前说过的那样。）

请告诉我为什么这不起作用。也许还有更好的方法来添加这些复选框，所以，如果您知道的话，也请让我知道。

最诚挚的问候，

Maximo

Answer 1

希望这可以作为起点：

//Dynamically create a checkbox, and add it to a div.
//appendChild() works for other types of HTML elements, too.
var div = document.getElementById("div");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "checkbox_1";
div.appendChild(checkbox);

var textbox = document.createElement("input");
textbox.type = "text";
textbox.disabled = true; //programmatically disable a textbox
div.appendChild(textbox);

//do something whenever the checkbox is clicked on (when user checks or unchecks it):
checkbox.onchange = function() {
  if(checkbox.checked) { //if the checkbox is now checked
    console.log("checked");
    textbox.disabled = false; 
  }
  else {
    console.log("unchecked");
    textbox.disabled = true; //programmatically disable a textbox
  }
}

<div id='div'></div>

Answer 2

感谢您的答复，很抱歉您这么晚答复，过去2周我很忙，没有太多时间。

我尝试使用您的示例代码，但无法使其正常工作。但是，我可以通过在if语句的输入中添加“ onclick =” Change.ischanged（）“来使其正常工作。我确定之前尝试过类似的操作，但是我可能键入了” CheckboxWindow“或” CheckboxChanged“ ”，而不是错误的“更改”。

if(checktext1 != null) 
{

    dialogboxbody.innerHTML +='<br><input type="checkbox" id="chb1" onclick="Change.ischanged()"><label for="chb1" class="lbl" id="lbl1"></label>'
    + '<label for="txt1">&#8364;</label> <input type="text" id="txt1" value="0,00" disabled>';
    document.getElementById('lbl1').innerHTML = checktext1 + ': ';

}

我知道添加这样的对象并不是最好的方法，但是似乎很难以您的方式实现我的目标。

我也将“ this.ischanged（id）”更改为“ this.ischanged = function（）”（我也做到了，所以我不再需要传递id了。）

如何为动态添加的复选框创建onclick事件？（JavaScript）

2 个答案:

如何为动态添加的复选框创建onclick事件？ （JavaScript）

2 个答案:

如何为动态添加的复选框创建onclick事件？（JavaScript）