【问题标题】:submit button doesnot hides when 'check-all' checkbox is unchecked未选中“全选”复选框时,提交按钮不会隐藏
【发布时间】:2017-07-25 05:29:41
【问题描述】:

我正在尝试在选中复选框时提交按钮显示/隐藏的页面。我想对'check-all'做同样的事情,目前当check-all被选中时,提交按钮会出现,但是当'check-all'被取消选中时,提交按钮不会隐藏。虽然列出的复选框执行得非常好,但只有取消选中“check-all”不会使提交按钮隐藏。

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

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

    });

【问题讨论】:

  • 添加一个小提琴,让我们了解您的代码或您想要做什么。
  • 能否给我一个关于如何制作小提琴的链接。我是新来的,所以建议会有所帮助。
  • 在这里您可以制作fiddle。或者 Stackoverflow(SO) 有它自己的 sn-p 你可以使用它,问问题时按 ctrl+m 制作 sn-ps .. :)

标签: php jquery checkbox


【解决方案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 />

【讨论】:

  • 感谢您的关注,但实际上这并没有解决问题。 @ChiragSuthar
【解决方案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>

【讨论】:

  • 感谢小伙伴的关心。但是改变你的建议也不起作用。取消选中“全选”后它仍然不会消失
  • 没有成功的伙伴。现在使用此代码不会在“全部检查”上显示提交按钮。早些时候是在那里。 //这是我的提交按钮 @madalinivascu
  • 你检查过我的演示吗?
  • 是的,我做到了。但也有当点击全选时,它不会检查所有列出的复选框@madalinivascu
  • 你需要$('input[name="check[]"]').prop('checked',$(this).is(":checked")); 才能看到更新的sn-p
【解决方案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;"/>

【讨论】:

    【解决方案4】:

    试试这个:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-21
      • 1970-01-01
      • 2014-11-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多