javascript 动态添加事件-CSDN博客

本文链接：https://blog.csdn.net/envykok/article/details/5530788

<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
    <title></title>
</head>
<body>

    <form id="form1">
    <div>
                         <ul>
                       <li><input type='radio' name="radio_113" value="1" />White</li>
                       <li><input type='radio' name="radio_113" value="2" />Black, African American, or Negro</li>
                       <li><input type='radio' name="radio_113" value="3" />American Indian or Alaska Native</li>
                       <li><input type='radio' name="radio_113" value="xxx" />Asian
                           <select name="radio_113">
                               <option value="xxx">(Select Asian Group)</option>
                               <option value="4">Asian Indian</option>
                               <option value="5">Chinese</option>
                               <option value="6">Filipino</option>
                               <option value="7">Japanese</option>
                               <option value="8">Korean</option>
                               <option value="9">Vietnamese</option>
                               <option value="10">Other</option>
                           </select>
                       </li>
                       <li><input type='radio' name="radio_113" value="xxxx" />Pacific Islander
                           <select name="radio_113">
                               <option value="xxx">(Select Pacific Islander Group)</option>
                               <option value="11">Native Hawaiian</option>
                               <option value="12">Guamanian</option>
                               <option value="13">Samoan</option>
                               <option value="14">Other Pacific Islander</option>
                           </select>
                       </li>
                       <li><input type='radio' name="radio_113" value="15" />Some other race</li>
                       <li><input type='radio' name="radio_113" value="16" />Prefer not to answer</li>
                   </ul>
    </div>
    </form>
    <script language="javascript">
        var selObject = document.getElementsByTagName("select");
        var selCount = selObject.length;
        for (i = 0; i < selCount; i++) {
            selObject.item(i).disabled = true;
            selObject.item(i).options[0].selected = true
        }

        var input = document.getElementsByTagName("input");
        var objLenth = input.length;
        for (j = 0; j < objLenth; j++) {
        //Check Radio Button
            if (input[j].type.toLowerCase() == "radio") {

                var objItem = input.item(j);

                if (window.addEventListener) {
                    //Mozilla, Netscape, Firefox
                    //addEventListener
                    objItem.addEventListener('click', function() { Rules(this) }, false);
                }
                else {
                    //IE
                    //objItem.attachEvent('onclick', function() { Rules(this) });
                    objItem.onclick = function() {
                        Rules(this);
                    }
                }
            }
        }

        function Rules(obj) {
            //Block all select box and Set default value
            var selObject = document.getElementsByTagName("select");
            var selCount = selObject.length;
            for (i = 0; i < selCount; i++) {
                selObject.item(i).disabled = true;
                selObject.item(i).options[0].selected = true
            }

            //Asian
            if (obj.value == 'xxx') {
                selObject.item(0).disabled = false;
            }

            //Pacific Islander
            if (obj.value == 'xxxx') {
                selObject.item(1).disabled = false;
            }
        }

    </script>
</body>
</html>