带有复选框if else语句的Jquery切换功能问题

Question

我有一个 Jquery 切换功能。当我直接按下的复选框被选中和取消选中时，我做了一个 if else 语句来修复错误。因此我做了一个 else if 语句来检查复选框是否被选中。但是现在该复选框甚至没有被选中 onclick。

在这里直播：http://jsfiddle.net/mvdnj/14/

我的 Jquery：

categoryDiv.toggle(function () {
    relativeMinimenu.removeClass('hidediv').addClass('someclass').show(200);
    categoryDiv.addClass('clicked').show(200);

    if(   categoryDiv.find('input:checkbox').attr('checked', 'checked') ) { 
        categoryDiv.find('input:checkbox').attr('checked', false);
    } else{
        categoryDiv.find('input:checkbox').attr('checked', 'checked');
    }
}
, function () {
    categoryDiv.removeClass('clicked').find('input:checkbox').prop("checked", false);
    relativeMinimenu.addClass('hidediv');
});

我的 HTML：

<div style="margin-top: 81px; width: 200px; float: left; background: none repeat scroll 0% 0% rgb(255, 255, 255);" cxlass="searchbox">  
<form method="get" action="/" accept-charset="UTF-8"><div style="margin: 0pt; padding: 0pt; display: inline;"><input type="hidden" value="✓" name="utf8"></div>

        <div id="category" class="menuitem category clicked">
                <label id="search_Company1_is_true" for="search_Company1">Company1 </label>
        <input type="hidden" value="0" name="search[Company1_is_true]"><input type="checkbox" value="1" name="search[Company1_is_true]" id="search_Company1_is_true" checked="checked">
        <div class="counter">1</div>
        </div>
        <div id="minimenu" class="someclass">
        <div class="miniitem">
         <label for="search_feature1">feature1</label>
        <input type="hidden" value="0" name="search[feature1_is_true]"><input type="checkbox" value="1" name="search[feature1_is_true]" id="search_feature1_is_true">
        </div>         <div class="miniitem">
         <label for="search_feature1">feature1</label>
        <input type="hidden" value="0" name="search[feature1_is_true]"><input type="checkbox" value="1" name="search[feature1_is_true]" id="search_feature1_is_true">
        </div>         <div class="miniitem">
         <label for="search_feature1">feature1</label>
        <input type="hidden" value="0" name="search[feature1_is_true]"><input type="checkbox" value="1" name="search[feature1_is_true]" id="search_feature1_is_true">
        </div>
        </div>
        <div class="menuitem category clicked">
        <label for="search_company2">company2</label>
        <input type="hidden" value="0" name="search[company2_is_true]"><input type="checkbox" value="1" name="search[company2_is_true]" id="search_company2_is_true" checked="checked">
        <div class="counter">1</div>
        </div>
 <div class="someclass">
        <div class="menuitem">
        </div>
</div>

    <input type="submit" value="Submit" style="display: none;" name="commit" id="search_submit" class="sdasd">

</form></div>

Answer 1

还有我的建议 - jsFiddle

基本上更轻量级的 HTML 和 jQuery 代码。我确实去掉了很多 CSS，所以你可以稍后重新添加。

HTML

<form method="get" action="/" accept-charset="UTF-8">
    <div class="checkGroup">
        <label>
            <span>Company1</span>
            <input type="checkbox" name="section" value="1"/>
        </label>
        <div class="payload">
            <label>
                <span>Feature1</span>
                <input type="checkbox" name="sub" value="1"/>
            </label>
            <label>
                <span>Feature2</span>
                <input type="checkbox" name="sub" value="2"/>
            </label>
            <label>
                <span>Feature3</span>
                <input type="checkbox" name="sub" value="3"/>
            </label>
        </div>
    </div>
    <div class="checkGroup">
        <label>
            <span>Company2</span>
            <input type="checkbox" name="section" value="1"/>
        </label>
        <div class="payload">
            <label>
                <span>Feature1</span>
                <input type="checkbox" name="sub" value="1"/>
            </label>
            <label>
                <span>Feature2</span>
                <input type="checkbox" name="sub" value="2"/>
            </label>
            <label>
                <span>Feature3</span>
                <input type="checkbox" name="sub" value="3"/>
            </label>
        </div>
    </div>
</form>

Javascript / jQuery

$(document).ready(function(){

    $('.payload').hide();

    $('.checkGroup > label > input[type="checkbox"]').live('change',function(){
        $t = $(this);
        $t.closest('.checkGroup').find('.payload').toggle( $t.is(':checked') );
        if( !$t.is(':checked') ){
           $t.closest('.checkGroup').find('.payload input[type="checkbox"]')
               .attr('checked',false);
        }
    }).trigger('change');

});

如果您希望计数器显示每个组中的复选框数量，请使用以下 Javascript / jQuery - jsFiddle Demo

$('.payload').hide();

$('.checkGroup > label > input[type="checkbox"]').live('change',function(){
    $t = $(this);
    $t.closest('.checkGroup').find('.payload').toggle( $t.is(':checked') );
    if( !$t.is(':checked') ){
       $t.closest('.checkGroup').find('.payload input[type="checkbox"]')
           .attr('checked',false);
    }
}).trigger('change');


$('.checkGroup input[type="checkbox"]').change(function(){
   $c = $(this);
   $c.closest('.checkGroup').find('label > span b').text( $c.closest('.checkGroup').find('input[type="checkbox"]:checked').length );
}).trigger('change');

Answer 2

我的提议：http://jsfiddle.net/GAZqG/3/

你有一个错误：

if(   categoryDiv.find('input:checkbox').attr('checked', 'checked') )

应该是：

if(   categoryDiv.find('input:checkbox').attr('checked') == 'checked' )

或

if(   categoryDiv.find('input:checkbox').attr('checked')  )

Answer 3

这是我的尝试：http://jsfiddle.net/mvdnj/21/

JQuery 是：

$('form').delegate('.category', 'click', function() {
    var $this = $(this), $menu = $this.next(), $cb = $('input:checkbox', $this);
    $cb.attr('checked', $menu.css('display') == 'none');
    $menu.toggle();
});

$('form').delegate('.someclass input:checkbox', 'change', function() {
    var $menu = $(this).parents('.someclass'), $cat = $menu.prev();
    var count = $("input:checkbox:checked", $menu).length;
    $('.counter', $cat).text(count);
});

这使用了更有效的 JQuery .delegate 方法，只创建了两个事件处理程序 - 一个用于 div 单击和菜单切换，一个用于处理复选框计数器。在这里，我已将处理程序附加到您唯一的表单，因为它包含所有相关的 div，但您不必这样做，您可以使用例如'body' 如果你愿意的话。