0

選択したラジオボタンに基づいて非表示のdivを表示したいのですが、次に例を示します。

<!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>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".option_select").click(function() {
            if ($('#extra_options').is(":hidden")) {
                $('#extra_options').slideDown("slow");
            }      
        });
    }); 
</script>        
</head>

<body>
<div id="extra_options" style="display:none;">
<input type="radio" name="ExtraOption" value="1" /> Extra option 1<br />
<input type="radio" name="ExtraOption" value="2" /> Extra option 2<br />
<input type="radio" name="ExtraOption" value="3" /> Extra option 3<br />
</div>

<form action="#" method="post">
<input type="radio" name="Option" class="option_select" value="1" /> Option 1<br />
<input type="radio" name="Option" class="option_select" value="2" /> Option 2<br />
<input type="radio" name="Option" class="option_select" value="3" /> Option 3<br />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>

しかし、その#extra_options divを選択したラジオボタン（「オプション1、オプション2、オプション3など）」に添付したいので、「これらの追加オプションはこのオプション＃に対応します」のように見えます。すべてのラジオボタンに#extra_optionsXdivを添付していますが、それよりも優れた方法があると思いました。何かアイデアはありますか？

TIA

4

2 に答える 2

1

を使用して追加できます

if ($('#extra_options').is(":visible")) {
    $('#extra_options').hide();
}
$(this).next().after($('#extra_options'));
$('#extra_options').slideDown("slow");

（編集：選択したオプションを変更するときに非表示/表示を追加）

于 2012-12-30T17:54:25.940 に答える
0

作業コードはこちらです。

$(document).ready(function() {
    $('form > input').click(function(){
        var t = $(this),
            extra = $('#extra_options');

        $('input[value=' + t.val() + ']', extra)
            .parent()
            .show()
            .siblings()
            .hide();

    });
});​

<label>次のようなテキストですべての入力をラップすることをお勧めします。<label><input type="radio" name="foo" value="bar" /> Its value here </label>

于 2012-12-30T18:45:00.283 に答える