jquery中的复选框

今天写项目需要用到jquery操作复选框，所以在看书学习

准备html代码：

<span style="white-space:pre">	</span><ul>
            <li>
                <input type="checkbox" id="handle"/>
                <label for="handle"><strong>Toggle All</strong></label>
            </li>
            
            <li>
                <input type="checkbox" class="toggle"/>
                <label>test1</label>
            </li>
            
            <li>
                <input type="checkbox" class="toggle"/>
                <label>test2</label>
            </li>
            
            <li>
                <input type="checkbox" class="toggle"/>
                <label>test3</label>
            </li>  
        </ul>

这里第一个li元素id为handle的是全选或全不选选项

然后是js代码：

$('#handle').click(function () {
        alert('test2');
        alert($(this).attr('checked'));
        if ($(this).attr('checked') == true){
            alert('test3');
            $('.toggle').attr('checked', true);
        }else{
            alert('test4');
            $('.toggle').removeAttr('checked');
        }
            
});

但是刷新好多次都不行，无奈，只能查看jquery手册：

attr(name|properties|key,value|fn)，该函数的意图为：设置或返回被选元素的属性值。

所以我用

alert($(this).attr('checked'));测试，结果出现的内容为checked

也就是说，这里$(this).attr('checked') 返回的是checked或者是undefine，而不是Boolean变量

所以，问题解决，这里条件判断if($(this).attr('checked') == true)，应当改为：if($(this).attr('checked) == 'checked');

最后，全选的js代码为：

$('#handle').click(function () {  
        if ($(this).attr('checked') == true){ 
            $('.toggle').attr('checked', true);
        }else{ 
            $('.toggle').removeAttr('checked');
        }
            
    });

其余各部分代码：

$(document).ready(function () { 
    /*
     * 当点击该按钮后，如果是选中，就将所有的复选框都选中
     * 如果是没选中，就将所有的复选框都不选中
     */
    $('#handle').click(function () {  
        if ($(this).attr('checked') == 'checked'){ 
            $('.toggle').attr('checked', true);
        }else{ 
            $('.toggle').removeAttr('checked');
        }
            
    });
    
    /*
     * 当点击某个复选框时，如果复选框选择的个数等于复选框的个数，就将全选选中
     * 如果选中的复选框没有到达复选框的数量，就将全选按钮不选中
     */
    $('.toggle').click(function(){
       if($('.toggle:checked').length == $('.toggle').length){
           $('#handle').attr('checked', true);
       }
       
       if($('.toggle:checked').length < $('.toggle').length){
           $('#handle').removeAttr('checked');
       }
    });
    
    /*
     * 获取选中的复选框的值
     */
    $('#getvalue').click(function(){
       var value = [];
       if($('.toggle:checked').length){
           $('.toggle:checked').each(function(){
              value.push($(this).next('label').html()); 
           });
           
           /*
            * 用ajax提交给服务器程序处理
            */
           var data = 'id=' + value;
           $.post(appPath + '/Street/testCheckbox', data, function(data){
               $('#result').html(data);
               
           }); 
       }else{ 
           alert('nothing select');
       }
    });
});

关于数据库批量更新的，明天再研究，碎觉！！！

Tony 2014/10/12 bloging～