[英]check all checkbox with hide
How do I add a checkbox that can check all the checkboxes if it's checked? 如何选中复选框以检查所有复选框?
How can I add show/hide functionality to the "check all" checkbox. 如何在“全部选中”复选框中添加显示/隐藏功能。 The submit button also need to be showed if the check all checkbox is checked.
如果选中全部勾选复选框,则还需要显示提交按钮。
$(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' />
$('#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);
}
});
Give the select all check box an id, say selectall
then 给select all复选框一个id,然后
selectall
$('#selectall').click(function(){
if (this.checked){
$('input[name="prog"]').prop('checked', true);
$submit.toggle( true );
}
});
if you want the checkboxes to be unselected if the select all in unselected 如果要在未选中时选择全部,则取消选中复选框
$('#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);
});
Try 尝试
$('input:checkbox[name!="prog"]').click(function(){
$('input:checkbox[name="prog"]').prop('checked', $(this).is(':checked'))
})
Or if you can change checkbox id to selall
或者,如果您可以将复选框ID更改为
selall
$('#selall').click(function(){
$('input:checkbox').prop('checked', $(this).is(':checked'))
})
Its quite simple. 它很简单。
lets name this checkbox <input type="checkbox" name="check_all" value="1">
我们将此复选框命名为
<input type="checkbox" name="check_all" value="1">
And now add event: 现在添加事件:
$('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
});
Then we should check if all input[name="prog"]
are checked: 然后我们应该检查是否检查了所有
input[name="prog"]
:
$('input[name="prog"]').change( function() {
if( $('input[name="prog"]:not(:checked)').length ) {
$('#submit_prog').hide();
} else {
$('#submit_prog').show();
}
});
select all checkboxes on #all
check and check #all
when all checkboxes are checked 选中
#all
check上的所有复选框,并在选中所有复选框时选中#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>
Change id and class of checkboxes 更改复选框的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">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.