首页 新闻 搜索 专区 学院

checkbox checked问题

0
悬赏园豆:50 [已解决问题] 解决于 2017-07-21 14:25

点击添加按钮追加元素,咸鱼的checkbox勾选状态没了。 怎么才能追加元素后勾选状态还在。

 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script>
        function load()
        {
            var boxs = document.querySelectorAll("#div [type=checkbox]");
            for ( var i = 0 ; i < boxs.length ; i++)
            {
                boxs[i].checked = true;
            }
        }
        
        function add()
        {
            var html = document.getElementById("div").innerHTML;
            var addHTML = '<input type="checkbox" name="fish">死鱼';
            
            document.getElementById("div").innerHTML = html + addHTML;
        }
  </script>
 </head>
 <body onload="load()">
        <div id="div">
            <input type="checkbox" name="fish">咸鱼
        </div>

        <input type="button" value="添加" onclick="add()"/>
 </body>
</html>
迟迟年月日的主页 迟迟年月日 | 初学一级 | 园豆:7
提问于:2017-07-21 11:32
< >
分享
最佳答案
0

你用的是innerHTML方法,innerHTML首先会将你元素内原有的内容删掉,然后再将写入,也就是说你看到的内容都是后来生成的,当然没有选中状态。你可以试着用append来添加:

var val=1;//input的value值
function add()
{
  var input = document.createElement('input');
  input.setAttribute('type', 'checkbox');
  input.setAttribute('name', 'fish');
  input.setAttribute('value', val);
  document.getElementById('div').appendChild(input);
  document.getElementById('div').append('死鱼');
  val++;
}

把add函数改成上面这个就可以了,亲测没问题.另外input得有value值,

收获园豆:40
与阳光握手言和 | 菜鸟二级 |园豆:373 | 2017-07-21 13:05

使用setAttribute,这么改简单些。修改load()方法

function load()
{
    var boxs = document.querySelectorAll("#div [type=checkbox]");
    for ( var i = 0 ; i < boxs.length ; i++)
    {
        //boxs[i].checked = true;
        boxs[i].setAttribute("checked",true);
    }
}

 

 

迟迟年月日 | 园豆:7 (初学一级) | 2017-07-21 14:58
其他回答(1)
0

  你这是重新改造了一个checkbox,当然是没有勾选的呢

收获园豆:10
飞鱼天山 | 园豆:219 (菜鸟二级) | 2017-07-21 11:54
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册