1

请参考 jsfiddle 链接。 http://jsfiddle.net/7gbNK/17/

我的代码如下：

<form action="" method="POST">
     <table width="50%" cellpadding="4" cellspacing="1" border="1">
         <tr>
             <td width="5%" align="center"><input name="chk_surname" id="chk_surname" type="checkbox" onclick="enable(this.id,'surname')"></td>
             <td width="10%" align="center">Surname</td>
             <td width="35%" style="display:none;" align="center"><input type="text" name="surname" id="surname" value-="surname" /></td>
         </tr>
     </table>
</form>

以下是我的 Javascript：

<script type="text/javascript">
    function enable(id,name)
    {
        alert("hi");

        $(document).on('change','#'+id, function() 
        {
            var checked = $(this).is(":checked");

            var index = $(this).parent().index();

            if(checked) {
                $('#surname').fadeIn(100);
            }
            else {
                $('#surname').fadeOut(100);
            }
        });
    }
</script>

为什么我在这里没有警觉。提前致谢。

4

3 回答 3

1

您的代码中存在多个问题。

1) 你正在使用 jQuery v1.6

但是.on()属于 1.7+ 更新 jQuery 版本还是使用.bind()

2) alert(Hi)// 缺少添加引号

change3）您可以在事件中分配事件click，但change只有在您点击 2 次后才会发生事件checkbox。所以将它们分开存放。

最后你的代码应该看起来像

function enable(id, name) {
    alert('hi');
}

$(document).on('change', '#chk_surname', function () {
    var checked = $(this).is(":checked");    
    var index = $(this).parent().index();    
    if (checked) {
        $('.td_surname').eq(index).fadeIn(100);
    } else {
        $('.td_surname').eq(index).fadeOut(100);
    }
});

更新的小提琴

于 2013-10-11T07:46:21.253 回答
1

有两个问题，

现场演示

  • 选择不换行 - 在第二个下拉菜单中

在此处输入图像描述

  • hi 应该是一个用引号括起来的变量以使其成为字符串。

改变

alert(hi);

至

alert('hi');
于 2013-10-11T07:50:08.870 回答
-2

问题是该enable函数尚未定义，请尝试将其放在 html 之上。

<head>
<script type="text/javascript">
    function enable(id,name)
    {
        alert("hi");

        $(document).on('change','#'+id, function() 
        {
            var checked = $(this).is(":checked");

            var index = $(this).parent().index();

            if(checked) {
                $('#surname').fadeIn(100);
            }
            else {
                $('#surname').fadeOut(100);
            }
        });
    }
</script>
</head>

.
.
.

<form action="" method="POST">
     <table width="50%" cellpadding="4" cellspacing="1" border="1">
         <tr>
             <td width="5%" align="center"><input name="chk_surname" id="chk_surname" type="checkbox" onclick="enable(this.id,'surname')"></td>
             <td width="10%" align="center">Surname</td>
             <td width="35%" style="display:none;" align="center"><input type="text" name="surname" id="surname" value-="surname" /></td>
         </tr>
     </table>
</form>
于 2013-10-11T07:46:58.030 回答