用隐藏检查所有复选框

Question

如何添加一个复选框，以检查所有复选框是否已选中？

如何将显示/隐藏功能添加到“全选”复选框。 如果勾选全部复选框，则还需要显示提交按钮。选择所有chckbox的

$(document).ready(function() { 

var $submit = $("#submit_prog").hide(), 
    $cbs = $('input[name="prog"]').click(function() { 
     $submit.toggle($cbs.is(":checked")); 
    }); 

}); 

<input type="checkbox" name="?" value="?"> // check all checkbox 

<input type="checkbox" name="prog" value="1"> 
<input type="checkbox" name="prog" value="2"> 

<input type="submit" id="submit_prog" value='Submit' /> 

Answer 1

1. 假设id为selall。
   
2. 创建一个类的所有复选框你想使用select选择所有

$('#selall').click(function(event) { 
    if(this.checked) { 
     // Iterate each checkbox 
     $('.yourchckbox').each(function() { 
      this.checked = true;       
     }); 
     $('#submit_prog').show(); 
    } 
    else { 
    $('.yourchckbox').each(function() 
    { this.checked = false; }); 
    $('#submit_prog').hide() 
    } 
}); 
    $('.yourchckbox').click(function(event) { 
    if(!(this.checked)) { 
    $('#selall').prop('checked', false); 
    } 

    }); 

Answer 2

尝试

$('input:checkbox[name!="prog"]').click(function(){ 
    $('input:checkbox[name="prog"]').prop('checked', $(this).is(':checked')) 
}) 

或者，如果你可以改变复选框id来selall

$('#selall').click(function(){ 
    $('input:checkbox').prop('checked', $(this).is(':checked')) 
}) 

Answer 3

它很简单。

让名此复选框<input type="checkbox" name="check_all" value="1">

现在添加事件：

$('input[name="check_all"]').click(function() { 
    if($(this).is(':checked')) { 
     $('input[name="prog"]').attr('checked', 'checked'); 
    } else { 
     $('input[name="prog"]').removeAttr('checked'); 
    } 

    $('input[name="prog"]:eq(0)').change(); //firing event which we will catch 
}); 

那么我们应该检查是否所有input[name="prog"]检查：

$('input[name="prog"]').change(function() { 
    if($('input[name="prog"]:not(:checked)').length) { 
     $('#submit_prog').hide(); 
    } else { 
     $('#submit_prog').show(); 
    } 
}); 

Answer 4

选择上#all检查，并检查所有复选框当所有复选框被选中时#all

<SCRIPT language="javascript"> 
    $(function(){ 

     $("#all").click(function() { 
       $('.one').attr('checked', this.checked); 
    if (this.checked) {$('#submit_prog').hide();} 
(this.checked)?$('#submit_prog').show():$('#submit_prog').hide(); 
     }); 

     $(".one").click(function(){ 

      if($(".one").length == $(".one:checked").length) { 
       $("#all").attr("checked", "checked"); 
       $('#submit_prog').show(); 
      } else { 
       $("#all").removeAttr("checked"); 
$('#submit_prog').hide(); 
      } 

     }); 
    }); 
    </SCRIPT> 

更改ID和类复选框

<input type="checkbox" id="all" > // check all checkbox 

<input type="checkbox" name="prog" class="one" value="1"> 
<input type="checkbox" name="prog" class="one" value="2"> 

Answer 5

给选择所有复选框的ID，说selectall然后

$('#selectall').click(function(){ 
    if (this.checked){ 
     $('input[name="prog"]').prop('checked', true); 
     $submit.toggle(true); 
    } 
}); 

，如果你想复选框是未选中的，如果全部选择未选中

$('#selectall').click(function(){ 
    $('input[name="prog"]').prop('checked', this.checked); 
    $submit.toggle(this.checked); 
}); 

$cbs = $('input[name="prog"]').click(function() { 
    $submit.toggle($cbs.filter(':checked').length == 0); 
    if (!this.checked) $('#selectall').prop('checked', false); 
});