选中所有带隐藏的复选框
check all checkbox with hide
我如何添加一个复选框,可以检查所有的复选框,如果它被选中?
我如何添加显示/隐藏功能,以"选中全部"复选框。如果选中了check all复选框,也需要显示提交按钮。
$(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' />
- 为所有你想选择的复选框创建一个类,使用select all
假设select all复选框id为selall。
$('#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);
}
});
给全选复选框一个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);
});
Try
$('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'))
})
很简单。
将此复选框命名为<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();
}
});
选中#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">
相关文章:
- 显示隐藏复选框
- 在jsTree中隐藏复选框
- 如何从django表单库中隐藏复选框,并使用Javascript切换其显示属性
- 单击后隐藏复选框
- 当按下按钮时,隐藏复选框会出现(正确),但不会'再次按下时t消失
- 根据数组中的值显示/隐藏复选框
- 如何从网格视图中隐藏复选框
- 如何隐藏复选框文本
- JQuery隐藏复选框选中,但不取消选中
- 使用JavaScript隐藏复选框时,请取消选中该复选框
- 身体负荷时隐藏复选框
- Kendo UI ASP.NET MVC-网格-使用JavaScript隐藏复选框
- 在显示/隐藏复选框中添加动画
- 隐藏复选框,但保留它的存在
- 不发送隐藏复选框输入值:(
- 在隐藏复选框上添加更改事件
- 如何使用jQuery显示/隐藏复选框中选中/未选中状态的元素
- 获取隐藏复选框的值
- 当从下拉菜单中选择默认值时,隐藏复选框.[Angular js]
- Javascript不显示/隐藏复选框点击的选择框