全选/不选,原生js比jquery更简单

今天在写一站式纳新系统的时候,需要用到全选与全部选的功能

一站式纳新系统123.youthol.cn

本来想通过jquery来写,这样可能会简单一些,大家可以看看下面的代码

$(function() {
    $("#checkall").click(function() {
        $("input[@name='checkname[]']").each(
            function() {
                $(this).attr("checked", true);
            });
        });
    $("#delcheckall").click(function() {
        $("input[@name='checkname[]']").each(
            function() {
                $(this).attr("checked", false);
            });
        });
});
<input type='checkbox' id='id1' name='checkname[]' value='1' />value1
<input type='checkbox' id='id2' name='checkname[]' value='2' />value2
<input type='checkbox' id='id3' name='checkname[]' value='3' />value3
<input type="button" id="checkall" name="checkall" value="全选" />
<input type="button" id="delcheckall" name="delcheckall" value="取消全选" /></pre>

或者更简单的写法:

$("#checkall").click(
    function(){
        if(this.checked){
            $("input[name='checkname']").attr('checked', true)
        }else{
            $("input[name='checkname']").attr('checked', false)
        }
    }
);

但是不可否认的是,这些字母依然很多

下面是js原生的

<script type="text/javascript"> 
/**
* 全选
* 
* items 复选框的name
*/
function allCkb(items){
    $('[name='+items+']:checkbox').attr("checked", true);
}

/**
* 全不选
* 
*/
function unAllCkb(){
    $('[type=checkbox]:checkbox').attr('checked', false);
}

/**
* 反选
* 
* items 复选框的name
*/
function inverseCkb(items){
    $('[name='+items+']:checkbox').each(function(){
    //此处用jq写法颇显啰嗦。体现不出JQ飘逸的感觉。
    //$(this).attr("checked",!$(this).attr("checked"));

    //直接使用js原生代码,简单实用
        this.checked=!this.checked;
    });
}
</script>

别看比较多,但把注释去掉真的不剩什么了。

把表单补充上,就可以了。

<input type='checkbox' name='ckb' value="0"/>白羊座
<input type='checkbox' name='ckb' value="1"/>狮子座
<input type='checkbox' name='ckb' value="2"/>水瓶座
<input type='checkbox' name='ckb' value="3"/>射手座<br/>
<input type="button" onclick="allCkb('ckb')" value="全 选"/>
<input type="button" onclick="unAllCkb()" value="全不选"/>
<input type="button" onclick="inverseCkb('ckb')" value="反 选"/></pre>

1 评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注