html table 多选框,HTML单选表格和多选表格实现

单选表格

1

单选表格

#id

123

当前选择:

function clickRadio () {

console.log(document.querySelector('.radio-table tbody input[type=radio]:checked'))

document.getElementById('checked').innerHTML = document.querySelector('.radio-table tbody input[type=radio]:checked').value

}

多选表格

12

多选表格

id

123

当前选中:

var checkValues = []

function clickCheckbox () {

var checkDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]:checked')

checkValues = []

for (var i = 0, len = checkDomArr.length; i < len; i++) {

checkValues.push(checkDomArr[i].value)

}

updateText()

var allCheckDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]')

var allCheckbox = document.getElementById('js-all-checkbox')

for (var i = 0, len = allCheckDomArr.length; i < len; i++) {

if (!allCheckDomArr[i].checked) {

if (allCheckbox.checked) allCheckbox.checked = false

break

} else if (i === len - 1) {

document.getElementById('js-all-checkbox').checked = true

return

}

}

}

function checkAll (current) {

var allCheckDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]')

if (!current.checked) { // 点击的时候, 状态已经修改, 所以没选中的时候状态时true

checkValues = []

for (var i = 0, len = allCheckDomArr.length; i < len; i++) {

var checkStatus = allCheckDomArr[i].checked

if (checkStatus) allCheckDomArr[i].checked = false

}

} else {

checkValues = []

for (var i = 0, len = allCheckDomArr.length; i < len; i++) {

var checkStatus = allCheckDomArr[i].checked

if (!checkStatus) allCheckDomArr[i].checked = true

checkValues.push(allCheckDomArr[i].value)

}

}

updateText()

}

function updateText () {

document.getElementById('js-check-text').innerHTML = JSON.stringify(checkValues)

}