添加全选复选框

Adding a Select All Checkbox

本文关键字：复选框 全选 添加      更新时间：2023-09-26

我想为此脚本添加一个选中/取消选中所有按钮：

.php：

require_once('includes/commons.php');
$query_get_addresses = 'SELECT * FROM user ORDER BY first_name ASC, last_name ASC';
$result_get_addresses = mysql_query($query_get_addresses);
$addresses_count = mysql_num_rows($result_get_addresses);
?>

脚本：

<script>
$(document).ready(function() {
    // initialize
    var recipient = $('input[name=recipient]').val();
    var recipient_array = new Array();
    if(recipient != '') {
        recipient_array = recipient.split(',');
        for(var i = 0; i < recipient_array.length; i++) {
            recipient_array[i] = $.trim(recipient_array[i]);
            if(recipient_array[i] == '')
                recipient_array.splice(i, 1);
        }
        $('input[type=checkbox]').each(function() {
            if($.inArray(this.value, recipient_array) >= 0) {
                $(this).attr('checked', true);
            }
        });
    }
    // add and/or remove
    $('input[type=checkbox]').click(function() {
        var recipient_list = '';
        $('input[type=checkbox]').each(function() {
            var index = $.inArray(this.value, recipient_array);
            if(this.checked) {
                if(index < 0)
                    recipient_array.push(this.value);
            }
            else {
                if(index >= 0) {
                    recipient_array.splice(index, 1);
                }
            }
        });
        $('input[name=recipient]').val(recipient_array);
    });
});
</script>

.html：

<h2>Choose recipient</h2>
<div><?php
if($addresses_count > 0) {
    ?><form name="select-recipient-form"><ul><?php
        while($row_get_addresses = mysql_fetch_assoc($result_get_addresses)) {
            $row_get_addresses = unsanitize($row_get_addresses);
            ?><li><input type="checkbox" name="recipient[]" id="recipient-1" value="<?php echo $row_get_addresses['recipient']; ?>" /><label for="recipient-1"><?php echo $row_get_addresses['first_name'].' '.$row_get_addresses['last_name'].' &lt;'.$row_get_addresses['recipient'].'&gt;'; ?></label></li><?php
        }
    ?></ul>
    </form><br /><?php
} else {
    ?><p>You don't have any contacts.</p><?php
}
?>
</div>

我试图遵循一些指南。例如，像这个，但我无法让它工作。知道我如何实现这一目标吗？谢谢

这对我有用：

    <script type="text/javascript"> 
$('#form1').ready(function(){
    $('.gumb:button').toggle(function(){
        $('.tocheck ').attr('checked','checked');
        $(this).val('uncheck all')
    },function(){
        $('.tocheck ').removeAttr('checked');
        $(this).val('check all');        
    })
})
</script>
<input type="button" class="gumb" value="check all" />
<input name="checkbox[]" class="tocheck" type="checkbox" value="<?php echo $rows['member_id'] ?>" />

"向您添加类"复选框，然后使用：

<form ...>
    <input type="checkbox" class="check-class" ... />
    ...
    <button type="button" class="check-all">Check All</button>
</form>
<script type="text/javascript">
    (function() {
        var checked = false;
        $('button.check-all').click(function() {
            checked = !checked;
            $('.checkbox-class').prop('checked', checked); // jQuery 1.6+
            if (checked) $(this).text('Uncheck All');
            else $(this).text('Check All);
        });
    })();
</script>

<span><input type="checkbox" class="checkall" />check all</span>

向除"全选"复选框之外的所有复选框添加类

<input type="checkbox" class="tocheck ... />
    ...
    ....
$(document).ready(function(){
$('.checkall').click(function() {
    $('.tocheck ').attr('checked', true); 
});
});

如果以下是 HTML <input class="checkbox-class" type="checkbox" value="1" /><input class="checkbox-class" type="checkbox" value="2" /> <input class="checkbox-class" type="checkbox" value="3" /> <input type="button" id="clickit" value="Check All" />

JS将完成这项工作

$("#clickit").click(function() {
    if ($(this).val() == 'Check All') {
        $('.checkbox-class').attr('checked', 'checked');
        $(this).val('Uncheck All');
    } else {
        $('.checkbox-class').removeAttr('checked');
        $(this).val('Check All');
    }
});

这段代码对我很好用

Jquery

<script type="text/javascript">
$(document).ready(function(){ 
$("#select_all").change(function(){
  $(".checkbox_class").prop("checked", $(this).prop("checked"));
  });
});
</script>

您只需要将类checkbox_class添加到所有复选框

.HTML

<input type="checkbox" id="selecctall">
<input class="checkbox_class" name="recipient[]" value="'.$recipientId.'" type="checkbox" />

简单易用的:D

只有这对我有用（顺便说一句，使用复选框，而不是按钮）

<script type="text/javascript">
$(document).ready(function(){
    $('#select_all').on('click',function(){
        if(this.checked){
            $('.checkbox').each(function(){
                this.checked = true;
            });
        }else{
             $('.checkbox').each(function(){
                this.checked = false;
            });
        }
    });
    $('.checkbox').on('click',function(){
        if($('.checkbox:checked').length == $('.checkbox').length){
            $('#select_all').prop('checked',true);
        }else{
            $('#select_all').prop('checked',false);
        }
    });
});
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>

<ul class="main">
    <li><input type="checkbox" id="select_all" /> Select all</li>
    <ul>
        <li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
        <li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
        <li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
        <li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
        <li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
    </ul>
</ul>

选中-取消选中所有/选择-取消选择所有复选框 遵循以下代码，使用以下代码非常简单

在 HTML 表单中添加以下代码行

<input type="checkbox" id='checkall' /> Select All

并使用以下脚本代码

 <script type='text/javascript'>
 $(document).ready(function(){
   // Check or Uncheck All checkboxes
   $("#checkall").change(function(){
     var checked = $(this).is(':checked');
     if(checked){
       $(".checkbox").each(function(){
         $(this).prop("checked",true);
       });
     }else{
       $(".checkbox").each(function(){
         $(this).prop("checked",false);
       });
     }
   });
 
  // Changing state of CheckAll checkbox 
  $(".checkbox").click(function(){
 
    if($(".checkbox").length == $(".checkbox:checked").length) {
      $("#checkall").prop("checked", true);
    } else {
      $("#checkall").removeAttr("checked");
    }
  });
});
</script>

请记住，脚本代码中的 .checkbox 是 HTML 表单的其他复选框中的类名

例如，如果您有如下输入复选框

<input class="checkbox" name="emailid[]" type="checkbox" value="<?php echo $email;?>" />
相关文章：