Question

我有一个Jquery切换功能。我已经制作了一个if else语句来修复错误，当我直接按下一个复选框时，它被检查并取消选中。因此，我已经使用else if语句来检查是否已选中该复选框。但现在复选框甚至没有被点击检查。

我的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，但您没有必要，并且您可以使用例如如果你愿意，可以选择“身体”。

Jquery切换函数问题与checkbox if else语句

3 个答案: