checked multipl under lin charset onclick images ack
下一步按钮
用到的知识点
点击事件 onclick
移除属性 removeAttribute
创建属性 setAttribute
源代码
- 1 <!DOCTYPE html>
- 2 <html>
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title></title>
- 6 </head>
- 7 <body>
- 8 <input id="aaa" type="checkbox" onclick="check()" />
- 9 <input type="button" value="下一步" id="btn" disabled="disabled"/>
- 10 </body>
- 11 </html>
- 12 <script>
- 13 function check(){
- 14 var aaa = document.getElementById('aaa');
- 15 if(aaa.checked){
- 16 document.getElementById('btn').removeAttribute('disabled');
- 17 }else{
- 18 document.getElementById('btn').setAttribute('disabled','disabled');
- 19 }
- 20 }
- 21 </script>
效果图
点击前
点击后
下拉菜单内容转换
知识点
appendChild 向节点添加最后一个子节点
selectedIndex 可设置或返回下拉列表中被选选项的索引号
源代码
- 1 <!DOCTYPE html>
- 2 <html>
- 3 <head>
- 4 <meta charset="UTF-8">
- 5 <title></title>
- 6 </head>
- 7 <body>
- 8 <form name="form1" method="post" action="">
- 9 <select name="sel_place1" size="11" multiple id="sel_place1" style="width: 150px;">
- 10 <option value="基米西">基米西</option>
- 11 <option value="罗伊斯">罗伊斯</option>
- 12 <option value="赫克托">赫克托</option>
- 13 <option value="J.博阿滕">J.博阿滕</option>
- 14 <option value="格策">格策</option>
- 15 <option value="杜尔姆">杜尔姆</option>
- 16 <option value="斯文本德">斯文本德</option>
- 17 <option value="拉尔斯本德">拉尔斯本德</option>
- 18 </select>
- 19 <input name="sure1" type="button" id="left" value="<-">
- 20 <input name="sure2" type="button" id="right" value="->">
- 21 <select name="sel_place2" size="11" multiple id="sel_place2" style="width: 150px;">
- 22 <option>诺伊尔</option>
- 23 <option>拉姆</option>
- 24 <option>默特萨克</option>
- 25 <option>胡梅尔斯</option>
- 26 <option>赫韦德斯</option>
- 27 <option>赫迪拉</option>
- 28 <option>托尼.克洛斯</option>
- 29 <option>厄齐尔</option>
- 30 <option>罗伊斯</option>
- 31 <option>托马斯.穆勒</option>
- 32 <option>克洛泽</option>
- 33 </select>
- 34 </form>
- 35 </body>
- 36 </html>
- 37 <script>
- 38 //---------------------**方法一**-----------------------------------------
- 39 //
- 40 document.getElementById('right').onclick = function(){
- 41 var sel_place1 = document.getElementById('sel_place1');
- 42 var sel_place2 = document.getElementById('sel_place2');
- 43 var obj_temp = sel_place1.options[sel_place1.selectedIndex];
- 44 sel_place2.appendChild(obj_temp);
- 45 }
- 46 document.getElementById('left').onclick = function(){
- 47 var sel_place1 = document.getElementById('sel_place1');
- 48 var sel_place2 = document.getElementById('sel_place2');
- 49 var obj_temp = sel_place2.options[sel_place2.selectedIndex];
- 50 sel_place1.appendChild(obj_temp);
- 51 }
- 52
- 53 //---------------------**方法二**-----------------------------------------------
- 54 // document.getElementById('right').onclick = function(){
- 55 // var sel_place1 = document.getElementById('sel_place1');
- 56 // var sel_place2 = document.getElementById('sel_place2');
- 57 // var temp = '<option value="'+sel_place1.value+'">'+sel_place1.value+'</option>'
- 58 // sel_place1.innerHTML = sel_place1.innerHTML.replace(temp,'');
- 59 // sel_place2.innerHTML +=temp;
- 60 // }
- 61
- 62 </script>
效果图
JS 按钮下一步 下拉菜单内容转换
来源: http://www.bubuko.com/infodetail-2043907.html