javascript - 如何在复选框状态下主动更新HTML？

说我有<input type="checkbox" id="box1" />和＆lt; div id="createhere"></div>并且在我的javascript文件中：

function(){
    var box=document.getElementById("box").checked;
    var s = "";
    if(box){
        s = "<input type="text" name="text" id="text" />"
        document.getElementById("createhere").innerHTML = s;
    }else{
        s = "";
        document.getElementById("createhere").innerHTML = s;
    }
}

现在这可行但是它只在我刷新浏览器（firefox）时创建了文本框。

如果不刷新浏览器，我该怎么做呢？

最佳答案：

2 个答案:

答案 0 :(得分：0)

此代码适用于jQuery。我使用jQuery因为问题有一个jQuery标签！

你可以试试这个。

$("#box").on('change', function(){

    var check = $(this).prop("checked");
    var inputHTML = "";

    if ( check )
        inputHTML = "<input type='text' name='text' id='text' />";

    $("#createhere").html( inputHTML );

}).trigger("change");

答案 1 :(得分：0)

使用更改事件处理程序

function update() {
  var box = document.getElementById("box").checked;
  var s = "";
  if (box) {
    s = '<input type="text" name="text" id="text" />';
  } else {
    s = "";
  }
  document.getElementById("createhere").innerHTML = s;
}

<input type="checkbox" id="box" onchange="update()" />
<div id="createhere"></div>

使用jQuery

jQuery(function($) {
  $('#box').change(function() {
    $('#createhere').html(this.checked ? '<input type="text" name="text" id="text" />' : '');
  }).change()
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="box" />
<div id="createhere"></div>