新手的Javascript代码修改
新手的Javascript代码修改
提问于 2013-11-21 16:03:26
我已经在小提琴中包含了我的全部代码，但无法让jquery脚本在jsfiddle中正确加载。它的工作原理，因为它应该在目前，内容的“邮报”显示时，它被点击。我想要的修改是，当选择"uk“和" post”选项时，隐藏的Post细节将是可见的。目前，它只在选择"Post“选项时才起作用。谢谢。我相信下面这条线需要改变
if(this.value == 'Post')回答 2
Stack Overflow用户
回答已采纳
发布于 2013-11-21 16:57:38
您不能在同一组中同时选择两个收音机(同名)。如果这是您想要做的，那么您应该使用复选框。
如果您有2个复选框，那么就有4个可能的状态。让我们调用这两个复选框A和B。以下是可能的状态(1被选中，0未被选中)：
A | B
-----
1 0 // only A is checked
0 1 // only B is checked
0 0 // neither is checked
1 1 // A and B are both checked处理这一问题的最简单方法是使用一些if/else。
html：
<span id="msg">toggle some checkboxes</span>
<div>
<input type="checkbox" id="a_checkbox" /> A <br/>
<input type="checkbox" id="b_checkbox"/> B <br />
</div>联署材料：
var $a = $("#a_checkbox"),
$b = $("#b_checkbox"),
$msg = $("#msg");
$("input:checkbox").change(function () {
var a_is_checked = $a.is(':checked'),
b_is_checked = $b.is(':checked');
if (a_is_checked && b_is_checked) {
$msg.text('A and B are both checked');
} else if (a_is_checked) {
$msg.text('only A is checked');
} else if (b_is_checked){
$msg.text('only B is checked');
} else {
$msg.text('neither is checked');
}
});演示
假设我理解您的问题，这个示例包含实现您自己的解决方案所需的一切。
编辑：
html：
<span id="msg">Select A and C</span>
<!-- group 1 -->
<h2>Group 1</h2>
<input type="radio" name="group1" value="A" /> A <br />
<input type="radio" name="group1" value="B" /> B <br />
<!-- group 2 -->
<h2>Group 2</h1>
<input type="radio" name="group2" value="C" /> C <br />
<input type="radio" name="group2" value="D" /> D <br />联署材料：
$(function(){
var $group1 = $("input:radio[name='group1']"),
$group2 = $("input:radio[name='group2']"),
$msg = $("#msg");
$("input:radio").change(function () {
var group1_val = $group1.filter(':checked').val(),
group2_val = $group2.filter(':checked').val();
if (group1_val === "A" && group2_val === "C") {
$msg.text("A and C are both selected");
} else {
$msg.text("Select A and C");
}
});
});演示
Stack Overflow用户
发布于 2013-11-21 16:12:54
请注意有几种方法可以做到这一点..。我这样做是为了尽可能多地使用原始代码、js逻辑和html结构。新文本框的ID为group_list。
(最近的编辑请看底部)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="send_to">
<input type="radio" id="send_poll" name="people" value="all" checked="checked" />all the attendees<br/>
<input type="radio" id="send_poll" name="people" value="one" />only one attendee<br/>
<div id="send_to_one">
<label>Write the attendee's name: </label><input type="text" id="attendeename" /><br/><br/>
</div>
<input type="radio" id="send_poll" name="people" value="group" />a group of attendees<br/>
<div id="send_to_group">
<label>Write the groups's names: </label><input type="text" id="group_list" /><br/><br/>
</div>
</body>
</html>css
#send_to_one{display:none;}
#send_to_group{display:none;}jquery
$(document).ready(function(){
$("#send_to_one").hide();
$("input:radio[name='people']").change(function(){
if(this.value == 'one' && this.checked){
$("#send_to_one").show();
}else{
$("#send_to_one").hide();
}
if(this.value == 'group' && this.checked){
$("#send_to_group").show();
}else{
$("#send_to_group").hide();
}
});
});打开/关闭同一个div.只需将原始JQuery修改为：
$(document).ready(function(){
$("#send_to_one").hide();
$("input:radio[name='people']").change(function(){
if((this.value == 'one' || this.value == 'group' ) && this.checked){
$("#send_to_one").show();
}else{
$("#send_to_one").hide();
}
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20125899
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号