Question

Plz引用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>

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

Answer 1

代码中存在多个问题。

1）你正在使用jQuery v1.6

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

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

3）您可以在 change 事件中指定 click 事件，但change事件仅在第二次发生后发生当您点击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);
    }
});

Updated fiddle

Answer 2

有两个问题，

<强> Live Demo

选择No wrap - In in second drop down

enter image description here

hi应该是引号中的变量换行，以使其成为字符串。

更改

alert(hi);

到的

alert('hi');

Answer 3

问题是enable函数未定义-yet-，请尝试将其置于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>

为什么我无法在复选框的点击事件上打印警报消息？

3 个答案: