4

デフォルトでは、両方の DIV を非表示にする必要があります。ラジオ ボタンを選択して、適切な DIV を表示する必要があります (その #ID に続く)。

以下は私のコードです：

<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>

<div id="bank" class="none">Bank</div>
<div id="school" class="none">School</div>

<style> .none { display:none; } </style>

ただし、一度に 1 つの div のみを表示する必要があります。出来ますか？

4

8 に答える 8

11

これは、CSS を使用して行うことができます。

注:<div>は、要素の一般的な兄弟である必要があります<input>。

HTML:

<form>
    <input type="radio" name="showGreen"> Green
    <input type="radio" name="showRed"> Red
    <div id="green">I am the green div.</div>
    <div id="red">I am the red div.</div>
</form>

CSS:

#green, #red {
    display: none;
    padding: 10px;
}

#green {
    background-color: #6f6;
}

#red {
    background-color: #f44;
}

input[name="showGreen"]:checked ~ #green,
input[name="showRed"]:checked ~ #red {
    display: block;
}

JSFiddle: http://jsfiddle.net/Ly56w/

于 2014-06-16T02:28:16.857 に答える
10

data-*ここで属性を次のように使用できます。

HTML

<input type="radio" name='thing' value='valuable' data-id="bank" />
<input type="radio" name='thing' value='valuable' data-id="school" />

JS

$(':radio').change(function (event) {
    var id = $(this).data('id');
    $('#' + id).addClass('none').siblings().removeClass('none');
});

ワーキングフィドルデモ

于 2013-07-03T11:04:48.213 に答える
2

これを試して：

HTML:

<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>

<div id="bank_div" class="none choice">Bank</div>
<div id="school_div" class="none choice">School</div>

JS:

$("input[type=radio]").click(function(event) {
    var myId = this.id;
    var targetId = myId + "_div";
    $("div.choice:not(#" + targetId + ")").addClass(".none");
    $("#" + targetId).removeClass(".none");
});
于 2013-07-03T10:57:59.280 に答える
2

これはjQueryを使用した私のソリューションです:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
function showBank()
{
$("#bankDIV").removeClass("none");
$("#bankDIV").addClass("showDIV");

//Make sure schoolDIV is not visible
$("#schoolDIV").removeClass("showDIV");
$("#schoolDIV").addClass("none");
}

function showSchool()
{
$("#schoolDIV").removeClass("none");
$("#schoolDIV").addClass("showDIV");

//Make sure bankDIV is not visible
$("#bankDIV").removeClass("showDIV");
$("#bankDIV").addClass("none");
}
</script>


</head>
<body>

<input type="radio" name='thing' value='valuable' id="bank" onclick="showBank()"/>
<input type="radio" name='thing' value='valuable' id="school" onclick="showSchool()"/>

<div id="bankDIV" class="none">Bank</div>
<div id="schoolDIV" class="none">School</div>

<style> 
.none { display:none; }, 
.showDIV { display:block; } 
</style>

</body>
</html>

コード内で ID が重複していないことを確認してください。一度に表示できる DIV は 1 つだけです。

よろしく、アレックス

于 2013-07-03T11:34:55.063 に答える
1 
<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>

<div id="bankDiv" class="none">Bank</div>
<div id="schoolDiv" class="none">School</div>

<style> .none { display:none; } </style>

jQuery:

$(function() {
    $('input[type="radio"]').change(function() {
        var rad = $(this);
        ('input[type="radio"]').addClass('none');
        if (rad.is(':checked'))
            ('#' + rad.attr('id') + 'Div').removeClass('none');
    });
});
于 2013-07-03T11:00:11.320 に答える
0

あなたもこれを試すことができます、

<input type="radio" name='thing' value='valuable' id="bank"/> <input type="radio" name='thing' value='valuable' id="school"/>

<div id="bankDiv" class="none">Bank</div> <div id="schoolDiv" class="none">School</div>

CSS

.none { display:none; }

jquery

$(function() {
    $('input[type="radio"]').change(function() {
        var rad = $(this).attr('id');           
            $('#' + rad + 'Div').show();
            $('#' + rad + 'Div').siblings('div').hide();
    });
});

このフィドルをチェックしてください：http://jsfiddle.net/Kritika/f2UKj/

于 2013-07-12T16:32:32.727 に答える
0

まず第一に、2つ以上のコントロールに同じIDを使用するのは良いアプローチではありません...

要素ごとに一意の ID を作成してください。

このコードを使用...

<input type="radio" name='thing' value='valuable' id="bank"/>
<input type="radio" name='thing' value='valuable' id="school"/>

<div id="radio_divs">
<div id="bank_div" class="none">Bank</div>
<div id="school_div" class="none">School</div>
</div>
<style> .none { display:none; } 
.view { display:block; }
</style>

ラジオボタンでonclickを使用するようになりました...

jQuery("input[type=radio]").click(function(event) {
    jQuery('#radio_divs').children('div').each(function () {
        jQuery(this).addClass(".none");
    });
    jQuery("#" + this.id + "_div").addClass(".view");
});

それは間違いなく機能し、単一のdivのみを表示し、残りのdivは非表示にします....

于 2013-07-03T11:08:51.497 に答える