dt97868
2017-07-25 05:29 阅读 37

取消选中“全部选中”复选框后,提交按钮不会隐藏

I am trying to make a page where submit button show/hides when a checkbox is checked. The same I want to do with the 'check-all' and currently when check-all is checked, the submit button appears but when the 'check-all' gets unchecked the submit button does not hides. Although the listed checkboxes perforn absolutely fine but only the unchecking of 'check-all' does not makes the submit button hide.

here is my code, please let me know where I am going wrong and if there is any solution for it.

<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'

and here is my 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") );
            });

    });
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

4条回答 默认 最新

  • 已采纳
    dongzhouzhang8696 dongzhouzhang8696 2017-07-25 05:40

    You didn't store the selector in the $submit variable, try:

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

    change the selector for the first click event to

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

    demo:

    $(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>

    </div>
    
    点赞 评论 复制链接分享
  • duan198299 duan198299 2017-07-25 05:43

    Here is Example how to You hide when all check box is unchecked....

    $("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 />

    </div>
    
    点赞 评论 复制链接分享
  • douyan1882 douyan1882 2017-07-25 05:49

    $("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;"/>

    </div>
    
    点赞 评论 复制链接分享
  • douan8473 douan8473 2018-07-10 11:36

    Try this:

    <script type="text/javascript">
    $(".YourCheckBoxClass").change(function() {
        $('#YourSubmitButtonID').prop('disabled', $(".check_class").filter(':checked').length < 1);
    });
    $(".YourCheckBoxClass").change();
    </script>
    
    点赞 评论 复制链接分享

相关推荐