JS 复选框CheckBox的应用(全选和单选之间的联系)

功能截图

JS 复选框CheckBox的应用(全选和单选之间的联系)_第1张图片

JS 复选框CheckBox的应用(全选和单选之间的联系)_第2张图片

也实现了功能,当用户的单选框全选时,全选的checkbox也会被选上,你所想的功能完全被实现。

直接上代码(具体更改部分见代码)

window.onload = function() {

    var allbtn = document.getElementById("selectall");//这儿的selectall表示全选checkbox的id

    allbtn.onclick = function() {

        if(allbtn.checked) {
            var allchooses = document.getElementsByName("select");//这儿的select表示单选的checkbox的name
            for(var i = 0; i < allchooses.length; i++) {
                allchooses[i].checked = true;
            }
        } else {
            var allchooses = document.getElementsByName("select");//这儿的select表示单选的checkbox的name
            for(var i = 0; i < allchooses.length; i++) {
                allchooses[i].checked = false;
            }
        }
    }
    var singlebtn = document.getElementsByName("select");//这儿的select表示单选的checkbox的name
    var n ;
    for(n= 0; n < singlebtn.length; n++) {
        singlebtn[n].onclick = function() {

            if(this.checked) {
                for(var m=0;m

 

你可能感兴趣的:(SpringBoot学习,SSM学习,网站开发)