Home >Web Front-end >JS Tutorial >Based on jQuery to implement the check box selection all, unselect all and inverse selection functions

Based on jQuery to implement the check box selection all, unselect all and inverse selection functions

高洛峰
高洛峰Original
2017-02-06 13:17:04965browse

This code is selected from many jQuery check box function codes. The code used in my project is shared with everyone here.

jQuery code:

        $(function(){ 
            $("#checkedAll").click(function(){ 
                $('[name=items]:checkbox').attr('checked',true); 
            }); 
            $("#checkedNo").click(function(){ 
                $('[name=items]:checkbox').attr('checked',false); 
            }); 
            $("#checkedRev").click(function(){ 
                $('[name=items]:checkbox').each(function(){ 
                    //$(this).attr('checked',!$(this).attr('checked')); 
                    this.checked = !this.checked; 
                }); 
            }); 
            $("#send").click(function(){ 
               var str = "你选中的是:\r\n"; 
               $('[name=items]:checkbox:checked').each(function(){ 
                   str += $(this).val()+"\r\n"; 
               }); 
                alert(str); 
            }); 
        });

HTML code:

    你爱好的运动是?<br> 
    <input type="checkbox" name="items" value="足球"/>足球 
    <input type="checkbox" name="items" value="篮球"/>篮球 
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球 
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br> 
    <input type="button" id="checkedAll" value="全 选"/> 
    <input type="button" id="checkedNo" value="全不选"/> 
    <input type="button" id="checkedRev" value="反 选"/> 
    <input type="button" id="send" value="提 交"/>

Guys, is it very convenient to use? This is what I selected from thousands of people. I hope it can be useful to everyone. Helps.

For more articles based on jQuery to implement checkbox selection, all selection, and inverse selection function, please pay attention to the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn