JS 动态修改onclick事件

目的：新建一个多选框，选中多选框后， 将多选框后的文字加上"line-though"效果
newCheckBox.onclick = function()
         {
             var pig =this.checked;
             alert(pig);  
             pig?this.nextSibling.style.textDecoration="line-through":this.nextSibling.style.textDecoration="none";
 
         }
上面代码alert(pig)输出了， 但是却没有实现我要的效果， 请问是啥原因啊？？

解决方案 »

  1.   

    alert(this.nextSibling.tagName)看看是不是你要的元素 可能只是一个textNode
      

  2.   

    我刚刚拿你代码测试了一下是可以的啊，我把代码贴出来你看看<input id="newCheckBox" type="checkbox" name="aa"><label id="nextSibling">中国</label>
    var newCheckBox = document.getElementById("newCheckBox");
    newCheckBox.onclick = function()
             {
                 var pig =this.checked;
                 //alert(pig);  
                 pig?this.nextSibling.style.textDecoration="line-through":this.nextSibling.style.textDecoration="none";
     
             }
      

  3.   

    我是动态创建复选框， 然后再添加的效果，但是实现不了； 我的代码：<html>
     
    <head>
    <title>JS实现选中复选框后删除后面文字的效果</title>
    </head>
     
    <script type="text/javascript">
        function DeleteWords(field)
        {
             var pig = field.checked;
             pig?field.nextSibling.style.textDecoration="line-through":field.nextSibling.style.textDecoration="none";
        }
     
        var i =0;
     
        function AddCheckBox( )
        {
            //获取要添加复选框位置的
            var parent = document.getElementById("addCheckBox");
     
            //添加复选框
            var newCheckBox = document.createElement("input");
            newCheckBox.type = "checkbox";
           // newCheckBox.onclick = "DeleteWords(newCheckBox)";
             newCheckBox.onclick = function()
             {
                 var pig =this.checked;
                 alert(pig);  
                 pig?this.nextSibling.style.textDecoration="line-through":this.nextSibling.style.textDecoration="none";
     
             }
     
            parent.appendChild(newCheckBox);
            //i++;为啥i在这不行
     
            //var str= "123"+i; 怎吗让一个字符串包含换行
            //给复选框后面添加文字
            parent.appendChild(document.createTextNode("123"+i));
     
            //添加换行
            var newLine = document.createElement("br");
            parent.appendChild(newLine);
            i++;
     
        }
     
    </script>
     
    <body>
         <div id="addCheckBox">
         </div>
         <input name="" type="button" value="新建复选框" onClick="AddCheckBox()" /> 
    </body>
    </html>
      

  4.   

    不好意思， 刚操作错误了；
    我是动态创建复选框， 然后再添加的效果，但是实现不了； 我的代码：<html>
     
    <head>
    <title>JS实现选中复选框后删除后面文字的效果</title>
    </head>
     
    <script type="text/javascript">
        var i =0;
     
        function AddCheckBox( )
        {
            //获取要添加复选框位置的
            var parent = document.getElementById("addCheckBox");
     
            //添加复选框
            var newCheckBox = document.createElement("input");
            newCheckBox.type = "checkbox";       //要实现， 但是却没实现
             newCheckBox.onclick = function()
             {
                 var pig =this.checked;
                 alert(pig);  
                 pig?this.nextSibling.style.textDecoration="line-through":this.nextSibling.style.textDecoration="none";
     
             }
     
            parent.appendChild(newCheckBox);
            parent.appendChild(document.createTextNode("123"+i));
     
            //添加换行
            var newLine = document.createElement("br");
            parent.appendChild(newLine);
            i++;
        }
     
    </script>
     
    <body>
         <div id="addCheckBox">
         </div>
         <input name="" type="button" value="新建复选框" onClick="AddCheckBox()" /> 
    </body>
    </html>
      

  5.   

    刚刚看了你的代码发现了你的错误，代码我就懒得写了，跟你说下
    pig?this.nextSibling.style.textDecoration="line-through":this.nextSibling.style.textDecoration="none";
    你的这句代码是将样式添加到checkbox里而没有添加到后面的文字里，而checkbox没这东西，所以没效果。
    我的思路是再创建一个label,点击复选框把改变label的样式就OK了。
      

  6.   

    pig?this.nextSibling.style.textDecoration="line-through":this.nextSibling.style.textDecoration="none";
    语法错误，如果不懂，还是老老实实写if语句比较保险。
    this.nextSibling.style.textDecoration=pig?'line-througn':'none';
    还有，在W3C标准里面，空格也会当成节点，所以this.nextSibling在火狐下面有可能是一段空白文本节点。
      

  7.   

    。。
    兄弟还有你这种写法啊，样式textDecoration=true,你知不知道pig是什么啊，他那句根本没问题
      

  8.   

    this.nextSibling  表示是新创建复选框后面的兄弟节点
    parent.appendChild(document.createTextNode("123"+i));
    这句话表示在复选框后面增加一个文本节点，也就是不带标签的纯文本，用this.nextSibling方法是得不到这个文本节点的  所以看不到效果。
    可以在复选框后面创建一个SPAN节点，这样就可以看到效果