Javascript单选按钮-尝试仅选择选中按钮_Javascript_Jquery_Html

Javascript单选按钮-尝试仅选择选中按钮

javascript jquery html

Javascript单选按钮-尝试仅选择选中按钮,javascript,jquery,html,Javascript,Jquery,Html,我试图编写一些代码，只有在选中单选按钮组合时才会显示某些内容。不幸的是，到目前为止我所做的似乎不起作用——出于某种原因，即使第二个单选按钮没有被选中，内容也会显示出来这是我的html： <head> <link rel="stylesheet" type="text/css" href="SEgraphics.css"></link> </head> <body> <form id = "form1">

我试图编写一些代码，只有在选中单选按钮组合时才会显示某些内容。不幸的是，到目前为止我所做的似乎不起作用——出于某种原因，即使第二个单选按钮没有被选中，内容也会显示出来

这是我的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>

提前谢谢

编辑：谢谢大家的回答，他们真的很有帮助。我现在在这个项目上做了更多的工作，我想我已经完成了功能-它在

我可以看到很多问题

1.需要两个等分

if (check1.checked == true) {

2.$i4而不是$i4

请将您忘记添加到$i4的JSFIDLE和您的条件放在第一位

第二次使用是“：选中”

注：我想你有很多事情要做。。所以我认为最好是问你想问的问题

更新：您的代码需要这样简化

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

我想我找到了答案。在if语句中，exra=，so

   if (check1.checked == true) {
   $('#info3').slideToggle();
   };

因此，首先，您需要一个

$(document).ready(function(){    
    $("#i1").on("click", function(){
        $(this).toggleClass('clicked');
        var check1 = $("i4");
        if (check1.checked = true) {
            $('#info3').slideToggle();
        };
    });
});

  $(document).ready(function(){

$("#i1").on("click", function(){
    $(this).toggleClass('clicked');
    var check1 = $("#i4");
    if (check1.checked = true) {
      $('#info3').slideToggle();
    };
});

为什么?？因为你在找id i4。在CSS中，您还可以使用第二，对于不是用于初始化的if语句，始终需要两个==for：

if (check1.checked == true) {

顺便问一下，你为什么使用两种不同的形式？我建议下载js，检查所有收音机

var checkedRadios = $( "input[type=radio]:checked" );

如果检查了id=test的元素，则为Vefify

if( $( "#test:checked" ).size() > 0 )

或

我用jQuery和类演示了一种实现这一点的方法

HTML:

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

如果check1.checked==true{应该有两个相等的标记-这真的很有帮助。这是我希望在Codepen上的全部功能@sim89是Codepen可以按照您的意愿工作吗？或者您希望对它进行修改吗？我相信它可以按照我的意愿工作-只是想让您知道它是固定的。它显示的信息基于两种形式的选择组合。@sim89 gla我很高兴听到它能工作。但是你的代码可能需要简化很多。如果我有时间，我会把它简化给你。很好Luck@sim89更新答案..这是如何简化你的代码..做所有你想要的if/else语句..请阅读我在代码中的注释以了解代码的具体功能..我认为这将帮助你..祝你好运：

if( $( "#test" ).is( ":checked" ) )

<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>

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