チェックボックスをクリックしたときに、HTML 要素を含むグループを開きたいです。1 つのグループで問題なく動作します (ID が 1 つしかないため)。しかし、さらに多くのグループがある場合、各グループには動的 ID (div-tag および input-tag 用) があります。これは私のHTMLコードです:
<div style="line-height: 1.7em; background-color: #eee;">
<span style="padding-left: 8px; color: #eb8f00; font-size: 1.1em; font-weight: bold; font-family: 'Trebuchet MS', Verdana, Helvetica, Sans-Serif;">
<input style="vertical-align: middle;" id="@currentElement.sGroupId" type="checkbox" name="@currentElement.sGroupId" />
<label for="@currentElement.sGroupId">@currentElement.sGroupName</label>
</span>
</div>
<div style="background-color: #eee;" class="@currentElement.sGroupName">
<!-- Dynamic content -->
</div>
これで、foreach ループのために動的な文字列ができました。
@currentElement.sGroupId は「idgr_12」のように見えます (数字のみが変わります)
@currentElement.sGroupName は、開きたい「グループ」の名前です (ループごとに名前全体が変わります)
これは私のJavascriptコードです:
$(function () {
$("id from div").hide();
$("id from input").change(function () {
var $this = $(this);
if ($this.is(":checked")) {
$("id from div").show(250);
}
else {
$("id from div").hide(250);
}
});
});
たとえば、それぞれにチェックボックスがある 3 つのグループを取得します。しかし、1 つのチェックボックスをクリックすると、各グループが展開されます。チェックボックスがアクティブになっているグループのみが展開されるように、JavaScript メソッドでこれらの動的 ID を取得するにはどうすればよいですか?