首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

HTML中如何radio如何实现下面的功能

2013-12-04 
HTML中怎么radio怎么实现下面的功能?input name1 typeradio /第一个input/inputinput name

HTML中怎么radio怎么实现下面的功能?
<input name="1" type="radio" />第一个<input></input>
<input name="2" type="radio" />第二个<input></input>
<input name="3" type="radio" />第三个<input></input>
<input name="4" type="radio" />第四个<input></input>
<input name="5" type="radio" />第五个<input></input>

问题一:
点击任何一个radio,第一次选中,再点一次就取消;
问题二:
当radio处于选中状态时,后面的input显示,否则不显示。

新手求教大神啊啊啊啊!! html javascript jquery radio css
[解决办法]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
$(document).ready(function() {
$(":radio").click(function() {
//alert($(this).val());
//alert($(this).attr("checked"));
var flag = $(this).attr("checked") == "checked" ? false : "checked";
if(flag == "checked") {
$(this).next().attr("type","text");
} else {
$(this).next().attr("type","hidden");
}
$(this).attr("checked", flag);

})
})
        </script>
    </head>
    
    <body>
        <input name="1" type="radio" value="1" />第一个<input type="hidden" />
        <input name="2" type="radio" value="2" />第二个<input type="hidden" />
        <input name="3" type="radio" value="3" />第三个<input type="hidden" />
        <input name="4" type="radio" value="4" />第四个<input type="hidden" />
        <input name="5" type="radio" value="5" />第五个<input type="hidden" />
    </body>
</html>



代码贴全了 楼主可以参考下
[解决办法]
<input name="1" type="radio" />第一个<input type="text" style="display: none">
<input name="2" type="radio" />第二个<input type="text" style="display: none">
<input name="3" type="radio" />第三个<input type="text" style="display: none">
<input name="4" type="radio" />第四个<input type="text" style="display: none">
<input name="5" type="radio" />第五个<input type="text" style="display: none">
<script type="text/javascript">
    window.onload = function(){
        var inputs = document.getElementsByTagName("input");
        for(var i= inputs.length;--i>=0;){
            inputs[i].index = 0;
            inputs[i].onclick = function(){
                getNextSibling(this).style.display = (this.checked = !(this.index++%2)) ? "inline" : "none";
            }
        }
    };
    function getNextSibling(obj){
        var next=obj.nextSibling;
        while(next.nodeType!=1){
            next = next.nextSibling;


        }
        return next;
    }
</script>

IE禁止修改type所以考虑使用display隐藏或显示

热点排行