jquery 如何使用复选框和.next()在表单中显示/隐藏/切换div

drkbr07n 于 2023-06-22 发布在 jQuery

关注(0)|答案(7)|浏览(151)

我尝试使用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>

任何帮助都将非常感谢，因为这是驾驶我坚果！

jquery

来源：https://stackoverflow.com/questions/12807411/how-to-show-hide-toggle-a-div-within-a-form-using-checkboxes-and-next

7条答案

按热度按时间

qq24tv8q1#

<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);
});

赞(0）回复(0）举报 2023-06-22

yk9xbfzb2#

怎么样：

<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

赞(0）回复(0）举报 2023-06-22

pkwftd7m3#

试试这个

.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();
        }
    });

Check FIDDLE

赞(0）回复(0）举报 2023-06-22

mznpcxlj4#

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();
});

赞(0）回复(0）举报 2023-06-22

ff29svar5#

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();
});

EXAMPLE

赞(0）回复(0）举报 2023-06-22

v2g6jxz66#

修改代码：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();
    }
});

赞(0）回复(0）举报 2023-06-22

fzwojiic7#

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>

赞(0）回复(0）举报 2023-06-22

我来回答

jquery 如何使用复选框和.next()在表单中显示/隐藏/切换div

7条答案

相关问题

热门标签

最新问答