|
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>单选按钮</title> <style type="text/css"> #all div{ display:none; } </style> <!-- 引入jquery库 --> <script src="../js/jquery-1.4.2.js"></script> <script type="text/javaScript"> /* 性格测试 */ function show(obj){ //在当前div显示之前, 先将所有div设置为隐藏 //$("#all").find("div").hide(); $("div[id^='result']").hide(); //根据input选项的value值获取对应div的id值 $("#result"+$(obj).val()).show(); } </script> </head> <body> <div> <h3>测试你的性格:</h3> <div>请选择下列一种水果:</div> <input type="radio" name="fruit" value="1" onclick="show(this)" />苹果<br /> <input type="radio" name="fruit" value="2" onclick="show(this)" />西瓜<br /> <input type="radio" name="fruit" value="3" onclick="show(this)"/>葡萄<br /> <input type="radio" name="fruit" value="4" onclick="show(this)"/>芒果<br /> <div id="all"> <div id="result1"> 您的性格,很羞涩. </div> <div id="result2"> 您的性格,很开朗. </div> <div id="result3"> 您的性格,很内向. </div> <div id="result4"> 您的性格,很醇香. </div> </div> </div> </body> </html> |
|
|
来自： 金银宝100 > 《jQuery知识点》
