首页 新闻 会员 周边 捐助

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
清除回答草稿
   您需要登录以后才能回答，未注册用户请先注册。