天天看點

js控制單選複選框(全選)

//擷取單選按鈕的選項值

        function f1() {

            //radio集合

            var radios = document.getElementsByName("sex");

            for (var i = 0; i < radios.length; i++) {

                if (radios[i].checked) {

                    alert(radios[i].value);

                    break;

                }

            }

        }

    <input type="checkbox" id="chkAll" onclick="checkAll()"/>全選<input id="btn" type="button" value="反選" /><br />

    <input id="childChk1" type="checkbox" value="cf"/>吃飯<br/>

    <input id="Checkbox2" type="checkbox" value="sj"/>睡覺<br/>

    <input id="Checkbox3" type="checkbox" value="dq"/>打球<br/>

//複選框的全選功能

function checkAll() {

            //觸發事件對象,全選的checkbox

            var obj = event.srcElement;

            //所有的input标簽

            var inputs = document.getElementsByTagName("input");

            for (var i = 0; i < inputs.length; i++) {

                //判斷目前的對象是不是input對象,是不是checkbox

                if (inputs[i].type == "checkbox") {

                    inputs[i].checked = obj.checked;

//給所有的 子checkbox注冊事件,如果所有的子checkbox都打勾了,則全選也打勾

        window.onload = function () {

                    //去掉全選的那個chexkbox

                    if (inputs[i].id != "chkAll") {

                        //給每個子checkbox注冊事件

                        inputs[i].onclick = function () {

                            //判斷子checkbox是不是被選中了

                            //假設所有的都被選中

                            var isCheckAll = true;

                            for (var j = 0; j < inputs.length; j++) {

                                if (inputs[j].type == "checkbox" && inputs[j].id != "chkAll") {

                                    //判斷子的checkbox是否被選中

                                    if (!inputs[j].checked) {

                                        isCheckAll = false;

                                        break;

                                    }

                                }

                            }

                            //設定全選狀态

                            document.getElementById("chkAll").checked = isCheckAll;

                        }

                    }

繼續閱讀