3

jqueryを使用してdivを切り替えようとしています-基本的にフォームの一部を非表示にし、ユーザーが特定のチェックボックスを選択したときにのみ表示したいです。

今、私はこのコードを以下に持っていますが、うまく機能しますが、リンクではなくチェックボックスで使用するために何をどこで編集すればよいかわかりません。また、ID を使用しないことをお勧めします。

サンプルコードは次のとおりです。

.answer { display:none; }

$("a.question").click(function(){
 $(this).next(".answer").toggle();
}); 

<a href="#" class="question">Queston 1</a>
<div class="answer">Answer 1</div>

<a href="#" class="question">Queston 2</a>
<div class="answer">Answer 2</div>

これは私をナッツに駆り立てているので、どんな助けでも大歓迎です！

4

7 に答える 7

4 
<label>Question 1:</label><input type="checkbox" class="question"/>
<div class="answer">Answer 1</div>


$("input[type=checkbox].question").change(function(){
    $(this).next(".answer").toggle(this.checked);
});
于 2012-10-09T19:55:07.543 に答える
2

どうですか：

<input class="check" type="checkbox" >
<div class="answer">Answer 1</div>

<input class="check" type="checkbox" >
<div class="answer">Answer 2</div>​
<style type="text/css">
.answer { display:none; }
.check:checked+.answer{
display:block;
}
​
</style>

そしてjsは必要ありません。デモ: http://jsfiddle.net/V9d2W/
「+」CSS セレクターのブラウザー サポート - http://www.quirksmode.org/css/contents.html

于 2012-10-09T20:01:16.550 に答える
0

http://jsfiddle.net/h87K2/ : ワーキング フィドル

コード：

Queston 1<input type="checkbox" class="question" />
<div class="answer">Answer 1</div>

Queston 2<input type="checkbox" class="question" />
<div class="answer">Answer 2</div>​


$("input.question").click(function(){
 $(this).next(".answer").toggle();
}); 
​
于 2012-10-09T19:55:48.680 に答える
0

ASP.NET:

 <asp:CheckBox ID="addinfoChk" runat="server" onclick="javascript:OpenPopup(this,'addinfopanel');" />
 <div id="addinfopanel" style="display: none"></div>

<asp:CheckBox ID="addChk" runat="server" onclick="javascript:OpenPopup(this,'addpanel');" />
 <div id="addpanel" style="display: none"></div>

JavaScript:

<script type="text/javascript">
    function OpenPopup(obj, divid) {
        if (obj.checked == true)
            document.getElementById(divid).style.display = 'block';
        else {
            document.getElementById(divid).style.display = 'none';
        }
    }

</script>
于 2013-10-30T17:33:22.863 に答える
0

CSS :

.answer { display:none; }​

HTML :

<input type="checkbox">Question 1</input>
<div class="answer">Answer 1</div>
<br/>
<input type="checkbox">Question 2</input>
<div class="answer">Answer 2</div>​

jQuery :

$("input[type='checkbox']").on("change", function(){
 $(this).next(".answer").toggle();
}); ​

例

于 2012-10-09T19:56:53.253 に答える
0

変更されたコード: jsfiddle

HTML:

Queston 1 <input type=checkbox />
<div class="answer">Answer 1</div>

 Queston 2<input type=checkbox />
<div class="answer">Answer 2</div>​

JS:

$("input[type='checkbox']").click(function(){
    if(this.checked){
            $(this).next(".answer").show();
    }
    else{
        $(this).next(".answer").hide();
    }
}); ​
于 2012-10-09T19:57:09.667 に答える
0

これを試して

.answer { display:none; }​

<input type="checkbox" class="question" /> : Queston 1
<div class="answer">Answer 1</div>

<input type="checkbox" class="question" /> : Queston 2
<div class="answer">Answer 2</div>​

    $(".question").click(function() {
        if ($(this).is(':checked')) {
            $(this).next(".answer").show();
        }
        else{
            $(this).next(".answer").hide();
        }
    });​

フィドルをチェック

于 2012-10-09T19:54:20.043 に答える