Question

我有这样的表格：

<form>
        <div class="box">
            <h1>Contact form :</h1>
            <label>
                <span>Typ: </span>
                <input type="radio" name="typ" value="admin" />admin<br />
                <input type="radio" name="typ" value="user" />user<br />
            </label>
            <label>
                <span>E-mail :</span>
                <input type="text" class="post" name="email" id="email"/>
            </label>
            <label>
                <span>Subject :</span>
                <input type="text" class="post" name="subject" id="subject"/>
            </label>

            <label>
                <span>If admin :</span>
                <input type="text" class="post" name="ifadmin" id="ifadmin"/>
            </label>

        </div>
    </form>

如何做到这样的事情：如果我选择第一个收音机“admin”用jquery动态显示“ifadmin”，如果我选择“user”不显示？

Answer 1

您可以使用以下代码执行此操作。在class标签上添加id或ifadmin（这样可以更轻松地使用jQuery进行操作），例如

<label class="ifadmin">
                <span>If admin :</span>
                <input type="text" class="post" name="ifadmin" id="ifadmin"/>
            </label>

和show/hide关于change无线电回调的内容。

$('input[name=typ]').on('change',function(){
        if($(this).val() == 'admin')
          $('.ifadmin').show();
       else
          $('.ifadmin').hide();           
    });

演示： http://jsfiddle.net/joycse06/dSEzE/

详情阅读.show()和.hide()

Answer 2

Read this

JAVASCRIPT

function pilihanmu(){
    var val = 0;
    for( i = 0; i < document.contoh.pilihan.length; i++ ){
        if( document.contoh.pilihan[i].checked == true ){
            val = document.contoh.pilihan[i].value;
            if(val=='3'){
                document.contoh.opsional.disabled = false;      
            }
            else{
                document.contoh.opsional.disabled = true;
            }
        }
    }
}

HTML 的

<form name="contoh">
    <input type="radio" name="pilihan" value="1" onclick="pilihanmu()"> Google<br>

    <input type="radio" name="pilihan" value="2" onclick="pilihanmu()"> Momonimo<br>

    <input type="radio" name="pilihan" value="3" onclick="pilihanmu()"> Lainnya..<br>

            <input type="text" name="opsional" class="text" disabled="">            
</form>

Answer 3

将id ='ifadmin'提供给ifadmin的<label>，并将此代码简单地放在表单上或头部中。

 <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){

$("input:radio[name=typ]").click(function() {
    if($(this).val()=="admin")
    $("#ifadmin").css("display","none");
    else
    $("#ifadmin").css("display","block");
});




    });
    </script>

表单，动态显示元素

3 个答案: