取消选中复选框时'check-all'提交按钮不会隐藏

Question

我正在尝试制作一个页面，选中复选框时提交按钮会显示/隐藏。我想对"全部检查"做同样的事情，目前当选中所有检查时，会出现提交按钮，但是当取消选中"全部检查"时，提交按钮不会隐藏。尽管列出的复选框绝对没问题，但只有取消选中"全勾"不会使提交按钮隐藏。

这是我的代码，请让我知道我哪里出错了，如果有任何解决方案。

<input type="checkbox" id="select_all" name="all_check[]" class="checkbox" value= "<?php echo $row['id']; ?>"/> </th>  //this is my 'check-all'
<input type="checkbox" name="check[]" <?php echo $disabled ;?> value= "<?php echo $row['id']; ?>"class="checkbox" id="select_all" >  //this is my listed checkboxes under the 'check-all'

这是我的jquery，

$(function(){
$('[type=checkbox]').click(function ()
{
var checkedChbx = $('[type=checkbox]:checked');
if (checkedChbx.length > 0)
{
$('#one').show();
}
else
{
$('#one').hide();
}
});
});

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

Answer 1

这是示例 如何在取消选中所有复选框时隐藏....

$("input[type=checkbox]").click(function(){
if($("input[type=checkbox]:checked").length > 0)
{
$("input[type=submit]").show();
}
else{ 
$("input[type=submit]").hide(); 
}
});
$(document).ready(function(){
$("input[type=submit]").hide(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="chk1[]" />check 1
<input type="checkbox" name="chk1[]" />check 2
<input type="checkbox" name="chk1[]" />check 3
<input type=submit />

Answer 2

您没有将选择器存储在 $submit 变量中，请尝试：

var $submit = $("#one");
$submit.hide();
var $cbs = $('input[name="all_check[]"]').click(function() {
$submit.toggle( $(this).is(":checked") );//use this to get the current clicked element 
});

将"首次点击"事件的选择器更改为

$('input[name="check[]"]').click(function () {....

演示：

$(function() {
$('input[name="check[]"]').click(function() {
var checkedChbx = $('[type=checkbox]:checked');
if (checkedChbx.length > 0) {
$('#one').show();
} else {
$('#one').hide();
}
});
});
$(document).ready(function() {
var $submit = $("#one");
$submit.hide();
var $cbs = $('input[name="all_check[]"]').click(function() {
$('input[name="check[]"]').prop('checked',$(this).is(":checked"));
$submit.toggle($(this).is(":checked")); //use this to get the current clicked element 
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="select_all" name="all_check[]" class="checkbox" value="<?php echo $row['id']; ?>" /> </th> //this is my 'check-all'
<input type="checkbox" name="check[]" class="checkbox" id="select_all">
<input type="checkbox" name="check[]" class="checkbox" id="select_all">
<input type="checkbox" name="check[]" class="checkbox" id="select_all">
<input type="checkbox" name="check[]" class="checkbox" id="select_all">
<input type="checkbox" name="check[]" class="checkbox" id="select_all"> //this is my listed checkboxes under the 'check-all'
<button id="one">one</button>

Answer 3

$("input[name='check']").on('change',function(){
if( $("input[name='check']:checked").length>0)
$("input[type='submit']").fadeIn();
else
$("input[type='submit']").fadeOut();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="check" />
<input type="checkbox" name="check" />
<input type="checkbox" name="check" />
<input type="checkbox" name="check" />
<input type="checkbox" name="check" />
<input type="checkbox" name="check" />
<input type="submit" value"submit" style="display:none;"/>

Answer 4

试试这个：

<script type="text/javascript">
$(".YourCheckBoxClass").change(function() {
$('#YourSubmitButtonID').prop('disabled', $(".check_class").filter(':checked').length < 1);
});
$(".YourCheckBoxClass").change();
</script>