Html+JavaScript实现表格（table）单选与多选

1、单选

<table class="radio-table" border> <thead> <tr> <th># document.getElementById('checked').innerHTML = document.querySelector('.radio-table tbody input[type=radio]:checked').value; } 

2、多选

<table class="multi-table" border> <thead> <tr> <th> <input id="js-all-checkbox" type="checkbox" onclick="checkAll(this)">  let checkDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]:checked'); checkValues = []; for (let i = 0, len = checkDomArr.length; i < len; i++) { checkValues.push(checkDomArr[i].value); } updateText(); let allCheckDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]'); let allCheckbox = document.getElementById('js-all-checkbox'); for (let 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) { let allCheckDomArr = document.querySelectorAll('.multi-table tbody input[type=checkbox]'); if (!current.checked) { // 点击的时候, 状态已经修改, 所以没选中的时候状态时true checkValues = []; for (let i = 0, len = allCheckDomArr.length; i < len; i++) { let checkStatus = allCheckDomArr[i].checked; if (checkStatus) allCheckDomArr[i].checked = false; } } else { checkValues = []; for (let i = 0, len = allCheckDomArr.length; i < len; i++) { let 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); } 

3、相关链接

简书-HTML单选表格和多选表格实现