2021-03-15 17:30

基于JQuery实现的复选框单选反选等功能

少尉

WEB前端

(763)

(0)

收藏

Html代码:

 <input type="checkbox" id="all">全选
 <input type="checkbox" id="reverse">反选
 <input type="checkbox" id="getvalue">获得选中的所有值
 <p><input type="checkbox" value="1">1</p>
 <p><input type="checkbox" value="2">2</p>
 <p><input type="checkbox" value="3">3</p>
 <p><input type="checkbox" value="4">4</p>
 <p><input type="checkbox" value="5">5</p>
 <p><input type="checkbox" value="6">6</p>

JQuery代码:

$(function(){
            $("#all").click(function(){
                $("p input").prop("checked",$(this).prop("checked"));
            });
            $("#reverse").click(function(){
                 $("p input").each(function(){
                     $(this).prop("checked",!$(this).prop("checked"));
                 });
            });
            $("#getvalue").click(function(){
                var arr=new Array();
                $("p input").each(function(){
                    if($(this).prop("checked")){
                        arr.push($(this).val());
                    }
                    
                });
                alert(arr.join(","));
            });
        });

代码说明:

1、当点击全选的时候,把p标签里面所有的checkbox标签的checked属性修改为和当前标签相同的值(当前选中就全部选中(true),当前不选就全部不选(false))。

2、当点击反选的时候,因为要挨个设置,所以不能统一的设置成一个值,要循环p标签下面所有的checkbox标签,然后单独设置每一个checkbox,把每一个checkbox的checked属性都设置成和原来的值相反的值(true改为false,false改为true)。

3、获取值也需要循环所有的checkbox标签,然后通过val()方法获取checkbox的值并放到一个数组中,最后统一输出。

0条评论

点击登录参与评论