获取 jQuery 处理复选框单击事件答案

【问题标题】：Get jQuery to process checkbox click event获取 jQuery 处理复选框单击事件
【发布时间】：2012-01-27 15:51:44
【问题描述】：

我知道这个问题可能会因为重复而被关闭（对不起，如果是的话），但在我的特殊情况下，功能无法按预期工作可能存在不同的问题，然后是其他类似的问题。

假设我们有一个标记：

<div>
   <label for="IsRecurring">Is Recurring</label>
</div>
<div>
    <input id="IsRecurring" name="IsRecurring" type="checkbox" value="true">
    <input name="IsRecurring" type="hidden" value="false" />            
</div>

<div id="schedulerTypesList" style="display:none">
    <div>
        <label for="ScheduleTypeId">Schedule</label>
    </div>
    <div class="editor-field">
        <input type="hidden" name="ScheduleTypeId" id="ScheduleTypeId" value="" />

        <ul id="ScheduleTypeIdlist" >
            <li>Once a weel</li>
        </ul>
    </div>
</div>

并且在document.ready事件中附加了一个JS：

$(document).ready(function() {
     $('#IsRecurring').click(function () {        
        var thisCheck = $(this);
        if (thischeck.is(':checked'))
            $('#schedulerTypesList').show();
        }
        else {
            $('#schedulerTypesList').hide();
        })
    });

Demo in JSFiddle.

为什么复选框点击事件不切换 div 的显示？

【问题讨论】：

标签： javascript jquery checkbox unobtrusive-javascript

【解决方案1】：

几个问题！！

$(document).ready(function() {
    $('#IsRecurring').click(function() {
        var thisCheck = $(this);
        if (thisCheck.is(':checked')) { // added this closing bracket
            $('#schedulerTypesList').show();
        }
        else {
            $('#schedulerTypesList').hide();
        } // added this closing bracket
    });
});

if 和 thischeck 后面缺少括号，而不是 thisCheck，并添加了正确的右括号。工作演示：http://jsfiddle.net/manseuk/4DqXv/18/

【讨论】：

是的，我是个笨蛋 =) 谢谢。