Javascript单选按钮 - 尝试只选择选中的按钮
[英]Javascript radio buttons - trying to select only checked button
问题描述
I'm trying to write some code which displays certain content only when a combination of radio buttons are checked.
我正在尝试编写一些代码，仅在选中单选按钮组合时才显示某些内容。 Unfortunately, what I've done so far doesn't seem to work - for some reason the content is displaying even when the second radio button hasn't been checked.不幸的是，到目前为止我所做的似乎不起作用 - 由于某种原因，即使没有选中第二个单选按钮，内容也会显示。
Here is my html:这是我的 html：
<head>
<link rel="stylesheet" type="text/css" href="SEgraphics.css"></link>
</head>
<body>
<form id = "form1">
<input type="radio" name="info1" id="i1" value="1" /><label for = "i1">Item 1</label>
<input type="radio" name="info1" id="i2" value="2" /><label for = "i2">Item 2</label>
<input type="radio" name="info1" id="i3" value="3" /><label for = "i3">Item 3</label>
</form>
<form id = "form2">
<input type="radio" name="info2" id="i4" value="4" /><label for = "i4">Item 4</label>
<input type="radio" name="info2" id="i5" value="5" /><label for = "i5">Item 5</label>
<input type="radio" name="info2" id="i6" value="6" /><label for = "i6">Item 6</label>
</form>
<div id ="info1">Test 1</div>
<div id ="info2">Test 2</div>
<div id="info3">Test 3</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="SEgraphic.js"></script>
</body>
And here is my javascript:这是我的javascript：
$(document).ready(function(){
$("#i1").on("click", function(){
$(this).toggleClass('clicked');
var check1 = $("i4");
if (check1.checked = true) {
$('#info3').slideToggle();
};
});
});
Thanks in advance!提前致谢！
Edit: Thanks for your answers everyone - they have been really helpful.编辑：感谢大家的回答 - 他们真的很有帮助。 I've done quite a bit more on the project now and think I have completed the functionality - it's on this codepen我现在在这个项目上做了更多的工作，并认为我已经完成了功能——它在这个 codepen 上
6 个解决方案
解决方案1
1 2015-11-18 13:32:22
1st you forgot to add # to $("i4") 1st 你忘了将#添加到$("i4")
2nd use is(':checked')第二次使用is(':checked')
$(document).ready(function(){
$("#i1").on("click", function(){
$(this).toggleClass('clicked');
var check1 = $("#i4");
if (check1.is(':checked')) {
$('#info3').slideToggle();
};
});
});
Note: I think you have a lot to do .. So I think it was better to ask your question with everything you want注意：我认为你有很多事情要做..所以我认为最好随心所欲地问你的问题
Update: your code need to simplify like this更新：您的代码需要像这样简化
$(document).ready(function(){
// top row of buttons //
// change 'click' to 'change'
$("input[type='radio']").on("change", function(){
// remove class clicked from the labels next input in same group
$(this).parent().find("input[type='radio']").next().removeClass('clicked');
// add class clicked to the label
$(this).next().addClass('clicked');
// hide all the divs its Id starts with info (info1 , info2 ,......)
$('div[id^="info"]').hide();
// get info1 checked input value
var info1_radio = $('input[name="info1"]:checked').val();
// get info2 checked input value
var info2_radio = $('input[name="info2"]:checked').val();
//Make all your if/else statments here to show the div you want
if(info1_radio == '1' && info2_radio == '4'){
$('#info1').slideDown();
}else if(info1_radio == '1' && info2_radio == '5'){
$('#info2').slideDown();
}else ......
});
});
解决方案2
0 2015-11-18 13:31:32
there are many issues i can see...我可以看到很多问题......
1.two equal marks required . 1.需要两个相等的分数。
if (check1.checked == true) {
2. $("#i4") instead of $("i4") 2. $("#i4")而不是$("i4")
Please put a jsfiddle and your conditions请放一个jsfiddle和你的条件
解决方案3
0 2015-11-18 13:32:45
I think I found the answer.我想我找到了答案。 In the if statement, exra =, so在 if 语句中，exra =，所以
if (check1.checked == true) {
$('#info3').slideToggle();
};
解决方案4
0 2015-11-18 13:37:35
So first, you need a # to get it in your javascript:因此，首先，您需要一个 # 才能在您的 javascript 中获取它：
$(document).ready(function(){
$("#i1").on("click", function(){
$(this).toggleClass('clicked');
var check1 = $("#i4");
if (check1.checked = true) {
$('#info3').slideToggle();
};
});
Why ?为什么 ？ because you look for the id i4.因为您要查找 ID i4。 In CSS you also call an id with # Second, you always need two == for if statements (Not for initializing):在 CSS 中，您还可以使用 # Second 调用 id，对于 if 语句（不是用于初始化），您始终需要两个 ==：
if (check1.checked == true) {
And btw why are you using 2 different Forms ?顺便说一句，你为什么使用 2 种不同的表单？ And i recommend to download js我建议下载js
解决方案5
0 2015-11-18 13:38:57
Get all checked radios获取所有检查过的收音机
var checkedRadios = $( "input[type=radio]:checked" );
Vefify if an element with id="test" is checked验证是否检查了 id="test" 的元素
if( $( "#test:checked" ).size() > 0 )
OR或者
if( $( "#test" ).is( ":checked" ) )
解决方案6
0 2015-11-18 13:52:32
I made a JSFiddle showing one way to do this using jQuery and classes.我制作了一个JSFiddle，展示了一种使用 jQuery 和类来做到这一点的方法。
HTML: HTML：
<h1>Check the checkboxes to see more content</h1>
<input type="checkbox" id="cb1" class="display-more-cb"/>
<label for="cb1">Checkbox 1</label>
<input type="checkbox" id="cb2" class="display-more-cb"/>
<label for="cb2">Checkbox 2</label>
<div id="content" style="display:none;">
<h2>This content is displayed when both checkboxes are checked.</h2>
</div>
JavaScript: JavaScript：
$(".display-more-cb").bind("change", function(){
var allChecked = true;
var checkboxes = $(".display-more-cb");
for(var i = 0; i < checkboxes.length; i++) {
if(!checkboxes[i].checked) {
allChecked = false;
break;
}
}
allChecked ? $("#content").show() : $("#content").hide();
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.