jquery - 自定义复选框不更新真正的复选框值

Question

我正在尝试使用 jQuery（小提琴）制作一个简单的自定义复选框。

我不明白为什么它不选中/取消选中真正的复选框。Ids 选择器被正确传递，实时值也是如此。

相关html：

<div id="corpo">
<div id="checkoptions">
<div><label>Option 1 <input type="checkbox" id="option1" checked></label></div>
</div>
</div>

相关的javascript：

// custom checkboxes
$('#corpo input[type=checkbox]').each(function(){

    var checkbox = $(this), checkid = checkbox.attr('id'),
            checked =  '', content = '✗';

    if(checkbox.is(':checked')){ var checked =  ' checked', content = '✓'; }

    checkbox.hide()
            .after('<div class="checkbox'+checked+'" id="c-'+checkid+'"><span>'+content+'</span></div>');
});

// update custom checkboxes values
$('#corpo').on('click','.checkbox',function(){

    var fakeCheckbox = $(this),
            realID = fakeCheckbox.attr('id').replace('c-',''),
            realCheckbox = $('#'+realID), checked = realCheckbox.is(':checked');

    if(checked){

        realCheckbox.attr('checked',false);
        fakeCheckbox.removeClass('checked').find('span').html('&#10007;');

    }else{

        realCheckbox.attr('checked',true);
        fakeCheckbox.addClass('checked').find('span').html('&#10003;');

    }

});

我已经尝试取消隐藏原始复选框，使用prop('checked',false)andremoveAttr('checked')而不是attr('checked',false).

我也需要更新真正的复选框，在“假”复选框中切换类是不够的。

Answer 1

$('#corpo').on('click','.checkbox',function(e){
    var isChecked = $(this).is('.checked');
    $(this).html(isChecked ? '✗' : '✓').toggleClass('checked');
    $('#'+this.id.replace('c-','')).prop('checked', !isChecked);

  //solve the annoying select issue
    document.onselectstart = function() { return false; };
    e.target.ondragstart = function() { return false; };
    return false;
});

小提琴

Answer 2

您在is(':checked')更改代码和删除 ID 检测方面遇到了问题：

// update custom checkboxes values
$('#corpo .checkbox').on('click',function(){
    var fakeCheckbox = $(this),
        realCheckbox = $(this).siblings('input'),
    checked = fakeCheckbox.hasClass('checked');
    if(checked){
        fakeCheckbox.removeClass('checked').find('span').html('✗');
        realCheckbox.removeAttr('checked');
    }else{
        fakeCheckbox.addClass('checked').find('span').html('✓');
        realCheckbox.attr('checked','checked');
    }
});