JS 动态修改onclick事件

tanhaiyuan 2012-07-27 12:35:30

目的：新建一个多选框，选中多选框后，将多选框后的文字加上"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)输出了，但是却没有实现我要的效果，请问是啥原因啊？？

...全文

1211 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

joybee007 2012-07-30

打赏
举报

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

小飛不想飛 2012-07-30

打赏
举报

[Quote=引用 5 楼的回复:]

不好意思，刚操作错误了；
我是动态创建复选框，然后再添加的效果，但是实现不了；我的代码：
JScript code

<html>

<head>
<title>JS实现选中复选框后删除后面文字的效果</title>
</head>

<script type="text/javascript">
var i =0;

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

静缘 2012-07-30

打赏
举报

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

小飛不想飛 2012-07-30

打赏
举报

[Quote=引用 7 楼的回复:]

pig?this.nextSibling.style.textDecoration="line-through":this.nextSibling.style.textDecoration="none";
语法错误，如果不懂，还是老老实实写if语句比较保险。
this.nextSibling.style.textDecoration=pig?'line-througn':'none';
还……
[/Quote]
。。。。。
兄弟还有你这种写法啊，样式textDecoration=true,你知不知道pig是什么啊，他那句根本没问题

tanhaiyuan 2012-07-28

打赏
举报

不好意思，刚操作错误了；
我是动态创建复选框，然后再添加的效果，但是实现不了；我的代码：



<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>

[Quote=引用 2 楼的回复:]

我刚刚拿你代码测试了一下是可以的啊，我把代码贴出来你看看
HTML code

<input id="newCheckBox" type="checkbox" name="aa"><label id="nextSibling">中国</label>

JScript code

var newCheckBox = document.getElementById("newCheckBox……
[/Quote]

tanhaiyuan 2012-07-28

打赏
举报

我是动态创建复选框，然后再添加的效果，但是实现不了；我的代码：



<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>

[Quote=引用 1 楼的回复:]

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

孟子E章 2012-07-27

打赏
举报

去掉html的换行、空格

小飛不想飛 2012-07-27

打赏
举报

我刚刚拿你代码测试了一下是可以的啊，我把代码贴出来你看看



<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";

 

         }