مشکل با فرم radio در html

MR AMIR-KHORE

تازه وارد
سلام ،

این کد رو نگاه کنید :


کد:
<form method="post">
1<input type="radio" name="radio" value="1" onchange="next1.style.display=this.checked?'':'none';"> / 2<input type="radio" name="radio" value="2" onchange="next2.style.display=this.checked?'':'none';">
<div id="next1" style="display:none;">
click on 1
</div>
<div id="next2" style="display:none;">
click on 2
</div>
</form>
من میخوام یه چیزی بسازم که وقتی روی 1 زد click on 1 رو نشون بده و اگه 2 رو زد click on 2 رو نشون بده ، اینی که من نوشتم وقتی رو 1 میزنی click on 1 رو نشون میده بعد وقتی رو 2 میزنی هم click on 1 و هم click on 2 رو نشون میده خودتون تست کنید منظورمو میفهمید یه مشکل دیگه که دارم میخوام 1 رو پیش فرض بذارم وقتی صفحه لود شد اول 1 رو نشون بده اما نمیشه این دو تا رو اگه کسی بلده کمکم کنه!!! :-/

 

william

کاربر عضو
براتون یه مقدار تمیز تر نوشتمش.


کد:
<form method="post">
1
<input checked="checked" type="radio" name="radio" value="1" onchange="radioHandler()" data-msg="Click on 1">
 / 2
<input type="radio" name="radio" value="2" onchange="radioHandler()" data-msg="Click on 2">
<div id="myTextContainer">

</div>
</form>
<script type="text/javascript">
    function radioHandler() {
        var textContainer = document.getElementById("myTextContainer");
        var radioBtn = document.getElementsByName("radio");
        for( var i=0; i<radioBtn.length; i++ ) {
            if( radioBtn[i].checked )
                break;
        }
        textContainer.textContent = radioBtn[i].getAttribute("data-msg");
    }
</script>
به خطوط توجه کنید متوجه میشید چه اتفاقی افتاده.

 

MR AMIR-KHORE

تازه وارد
براتون یه مقدار تمیز تر نوشتمش.

کد:
<form method="post">
1
<input checked="checked" type="radio" name="radio" value="1" onchange="radioHandler()" data-msg="Click on 1">
 / 2
<input type="radio" name="radio" value="2" onchange="radioHandler()" data-msg="Click on 2">
<div id="myTextContainer">

</div>
</form>
<script type="text/javascript">
    function radioHandler() {
        var textContainer = document.getElementById("myTextContainer");
        var radioBtn = document.getElementsByName("radio");
        for( var i=0; i<radioBtn.length; i++ ) {
            if( radioBtn[i].checked )
                break;
        }
        textContainer.textContent = radioBtn[i].getAttribute("data-msg");
    }
</script>
به خطوط توجه کنید متوجه میشید چه اتفاقی افتاده.
ممنون ، ولی من هنو مشکلم حل نشده اون کدی که دادم یه تست بود الان این کدی که شما دادی اگه من بخوام مثلا <textarea> رو نشون بدم که مثلا وقتی رو یک کلیک کرد <textarea> و وقتی رو 2 کلیک کرد <input> رو نشون بده نمیشه :(

و یه چیزه دیگه اینکه شما 1 رو پیشفرض قرار دادید اما اون چیزی وقتی 1 باشه باید نشون بده رو نشون نمیده فقط 1 حالت checked در اومده :|

میشه کد رو تصحیح کنید بهم بدید؟ :">

 

william

کاربر عضو
کد:
<form method="post">
1
<input checked="checked" type="radio" name="radio" value="1" onchange="radioHandler()" data-view="container1">
 / 2
<input type="radio" name="radio" value="2" onchange="radioHandler()" data-view="container2">
 / 3
<input type="radio" name="radio" value="3" onchange="radioHandler()" data-view="container3">
<div id="container1">This is container #1</div>
<div id="container2">This is container #2</div>
<div id="container3">This is container #3</div>
</form>
<script type="text/javascript">
    function radioHandler() {
        var radioBtn = document.getElementsByName("radio");
        var index = 0;
        for( var i=0; i<radioBtn.length; i++ ) {
            var dataView = radioBtn[i].dataset.view;
            document.getElementById(dataView).style.display = "none";
            if( radioBtn[i].checked )
                index = i;
        }
        document.getElementById(radioBtn[index].dataset.view).style.display = "";
    }
    radioHandler();
</script>
 
بالا