用隱藏檢查所有複選框

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); 
});