JS 複選框CheckBox的應用(全選和單選之間的聯繫)

功能截圖

也實現了功能,當用戶的單選框全選時,全選的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<singlebtn.length;m++){
                    if(!singlebtn[m].checked){
                        break;
                    }
                    else if(m==singlebtn.length-1){
                        allbtn.checked=true;
                    }
                }
            } else {
                for(var m=0;m<singlebtn.length;m++){
                    if(singlebtn[m].checked){
                        break;
                    }
                   
                }
                allbtn.checked=false;
            }
        }
    }
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章