全选功能

全选功能应用的比较频繁，以下是自己写的一个全选功能

<label>全选</label>
<input type="checkbox" id="controllALl" name="checkAll"/></br>
<?php
// 模拟后台传过来的数据
$list = [
    0 => ['id'=>1,'name'=>'Chrdai'],
    1 => ['id'=>2,'name'=>'Carroll'],
    2 => ['id'=>3,'name'=>'Tom'],
    3 => ['id'=>4,'name'=>'David'],
];
$i = 1;

foreach($list as $key => $value){ ?>
    <input type="checkbox" id="checkid_<?php echo $i ?>" name="box" value="<?php echo $value['id'] ?>"/>
<?php $i ++; }?>

<input type="button" class="handleSelected" value="处理所选"/>

<script>
    // 全选
    $('#controllALl').click(function(){
        var checklist = $('input[name="box"]');         // 获取所有的 checkbox

        // 若全选按钮被选中，则将所有 checkbox 设为 true,否则设为 false
        if($('#controllALl').prop('checked') == true){
            for(var i=0; i<checklist.length; i++){
                checklist[i].checked = true;
            }
        }else{
            for(var j=0; j<checklist.length; j++){
                checklist[j].checked = false;
            }
        }
    })

    // 处理所选
    $('.handleSelected').click(function(){
        var checklist = $('input[name="box"]');         // 获取所有的 checkbox
        console.log(checklist);
        var idList = "";                                // 将所有选中的 checkbox 的 id 拼成一个字符串
        for(var i=0; i<checklist.length; i++){
            if(checklist[i].checked==true){
                idList += checklist[i].value + ',';
            }
        }
        if(idList == ''){
            alert('你没有选中任何checkbox');
        }else{
            // 将选中得 checkbox 的 id 传到后台，进行相应的处理
        }
    })
</script>

如有转载，请注明出处：http://www.cnblogs.com/chrdai/p/7156620.html

转载于:https://www.cnblogs.com/chrdai/p/7156620.html