原生JS封装复选框全选、反选操作

Html

Css


    
        
        item1
        item2
        item3
        item4
        item5

.btnAll button {
	display:inline-block;
	padding:6px 12px;
	font-size:14px;
	font-weight:400;
	line-height:1.42857143;
	text-align:center;
	cursor:pointer;
	border:1px solid transparent;
	border-radius:4px;
	-webkit-appearance:button;
	cursor:pointer;
	color:#fff;
	background-color:#5bc0de;
	border-color:#46b8da;
}

class SeletorAll {
    constructor({
        inps = '',
        allSelect = '',
        notAllSelect = '',
        reverseSelect = '',
        selectVal = ''
    }) {
        this.inps = document.querySelectorAll(inps)
        this.allSelectBtn = document.querySelector(allSelect)
        this.notAllSelect = document.querySelector(notAllSelect)
        this.reverseSelectBtn = document.querySelector(reverseSelect)
        this.selectValBtn = document.querySelector(selectVal)
        this.addEventListener()
    }
    addEventListener() {
        this.allSelectBtn.addEventListener('click', () => {
            console.log('allSelect')
            let input = this.inps
            for (let i = 0; i < input.length; i++) {
                input[i].checked = true
            }
        }, false)

this.notAllSelect.addEventListener('click', () => {
            console.log('notAllSelect')
            let input = this.inps
            for (let i = 0; i < input.length; i++) {
                input[i].checked = false
            }
        }, false)

this.reverseSelectBtn.addEventListener('click', () => {
            console.log('reverseSelect')
            let input = this.inps
            for (let i = 0; i < input.length; i++) {
                input[i].checked = !input[i].checked
            }
        }, false)

this.selectValBtn.addEventListener('click', () => {
            console.log('selectVal')
            let input = this.inps
            let valStr = ''
            for (let i = 0; i < input.length; i++) {
                if (input[i].checked) {
                    let val = input[i].value
                    valStr += val + ','
                }
            }
            alert(valStr)
        }, false)
    }
}

let selectorAll = new SeletorAll({
    inps: 'input',
    allSelect: '.allSelect',
    notAllSelect: '.notAllSelect',
    reverseSelect: '.reverseSelect',
    selectVal: '.selectVal'
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

原生JS封装复选框全选、反选操作



代码描述：原生JS封装复选框全选、反选操作

原生JS封装复选框全选、反选操作
使用了ES6的语法

1

最新

发表评论全部评论

暂时没有评论！

WckY0

2017/8/11 0:07:08

这个有意思
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

??????

相关代码

原生JS封装复选框全选、反选操作

最新