javascript - 复选框无法正常工作

Question

这是我在 jquery 中的代码，我实际上想要这样的方式:

• 默认情况下，Ball 的值将显示在文本框中。
• 同时 All 或 Stopall 都可以工作(这里不能正常工作:( )
• 多次检查“全部”按钮，未按预期工作

这是 fiddle 链接:http://jsfiddle.net/bigzer0/PKRVR/11/

$(document).ready(function() {
    $('.check').click(function(){
        $("#policyName").val('Start');
        $("#features").val('');

        $('[name="startall"]').on('click', function() {
        var $checkboxes = $('input[type="checkbox"]').not('[name="startall"], [name="stopall"]');
        if (this.checked) {
            $checkboxes.prop({
                checked: true,
                disabled: true
            });
        }
        else{
             $checkboxes.prop({
                checked: false
            });
        }
    });

                  $(".check").each(function(){
            if($(this).prop('checked')){

                $("#policyName").val($("#policyName").val() + $(this).val());    
                $("#features").val($("#features").val() + $(this).data('name'));
                }            
        });

     });
});

欢迎对此背景提出任何评论

Answer 1

您的代码在很多方面都被破坏了。您正在将单击事件绑定(bind)到单击事件内。您应该将其放在外面，并确保它位于 document.ready 函数内部，因为您的元素是静态元素。

$(document).ready(function() {    
    // cache features
    var $features = $('#features');
    // cache policyname
    var $policy = $("#policyName");
    // cache all/stopall
    var $ss = $('[name="startall"],[name="stopall"]');
    // cache all others
    var $checkboxes = $('input[type="checkbox"]').not($ss);

    // function to update text boxes
    function updateText() {
        var policyName = 'Start';
        var features = '';
        // LOOP THROUGH CHECKED INPUTS - Only if 1 or more of the 3 are checked
        $checkboxes.filter(':checked').each(function(i, v) {
            policyName += $(v).val();
            features += $(v).data('name');
        });
        // update textboxes
        $policy.val(policyName);
        $features.val(features);
    }

    $checkboxes.on('change', function() {
        updateText();
        // check startall if all three boxes are checked
        $('input[name="startall"]').prop('checked', $checkboxes.filter(':checked').length == 3);
    });

    $('input[name="startall"]').on('change', function() {
        $checkboxes.prop({
            'checked': this.checked,
            'disabled': false
        });
        updateText();
    });

    $('input[name="stopall"]').on('change', function() {
        $checkboxes.add('[name="startall"]').prop({
            'checked': false,
            'disabled': this.checked
        });
        updateText();
    });

    // updatetext on page load
    updateText();
});​

FIDDLE