Rumah >hujung hadapan web >tutorial js >Javascript_14_DOM_radio练习
Javascript_14_DOM_radio练习
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <title>DOM_radio练习</title> <style type="text/css"> #div_id_1{ display:none; } #ul_id_1{ list-style:none; margin:0px; } .close{ display:none; } .open{ display:block; } </style> ==============我是分割线================== /* * 需求:根据所选的单选按钮,展开显示相应的结果 */ <script type="text/javascript"> function showResult(){ //1,要先判断是否有答案被选中。 //2,获取所有fruit的radio。并遍历判断checked状态。 var collFruit = document.getElementsByName("fruit"); var flag = false; var score; for(var x=0; x<collFruit.length; x++){ if(collFruit[x].checked){ flag = true; score = collFruit[x].value; break; } } var oSpan=document.getElementById("span_id_err"); if(!flag){ oSpan.innerHTML = "还没选答案呢!".fontcolor("red"); return; } oSpan.innerHTML = ""; var oDiv_r1=document.getElementById("div_result_id_1"); var oDiv_r2=document.getElementById("div_result_id_2"); if(score>=1 && score<=3){ oDiv_r1.className = "open"; oDiv_r2.className = "close"; } else{ oDiv_r1.className = "close"; oDiv_r2.className = "open"; } } </script> </head> <body> <div> 欢迎参与性格测试:您喜欢的水果是什么? <ul id="ul_id_1"> <li><input type="radio" name="fruit" value="1" />葡萄</li> <li><input type="radio" name="fruit" value="2" />西瓜</li> <li><input type="radio" name="fruit" value="3" />苹果</li> <li><input type="radio" name="fruit" value="4" />芒果</li> <li><input type="radio" name="fruit" value="5" />樱桃</li> </ul> </div> <div> <input type="button" value="查看测试结果" onclick="showResult()" /> <span id="span_id_err"></span> <div id="div_result_id_1" class="close">1-3分:你的性格内向,建议...</div> <div id="div_result_id_2" class="close">4分以上:你的性格外向,建议...</div> </div> ==============我是分割线================== /* * 需求:点击单选按钮是 展开,否关闭! */ <script type="text/javascript"> function show_2(oRadio){ var oDiv = document.getElementById("div_id_1"); with(oDiv.style){ if(oRadio.value=="yes"){ display = "block"; }else{ display = "none"; } } } function show_1(oRadio){ var oDiv = document.getElementById("div_id_1"); if(oRadio.value=="yes"){ oDiv.style.display = "block"; }else{ oDiv.style.display = "none"; } } </script> <div> 您要参与问卷调查吗: <input type="radio" name="1" value="yes" onclick="show_2(this)" />是 <input type="radio" name="1" checked="checked" onclick="show_2(this)" />否 </div> <div id="div_id_1"> 问卷调查内容:<br/> 您的姓名:<input type="text" /><br> 您的邮箱:<input type="text" /> </div> </body> </html>
以上就是Javascript_14_DOM_radio练习的内容,更多相关内容请关注PHP中文网(www.php.cn)!