Question

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

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

这是我的javascript：

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

提前致谢！

编辑：感谢大家的回答 - 他们真的很有帮助。我现在在项目上做了很多，并且认为我已经完成了功能 - 它在this codepen上

Answer 1

1，您忘了将＃添加到 $（＆＃34; i4＆＃34;）

第二次使用is(':checked')

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

DEMO

注意：我认为你有很多工作要做..所以我认为最好用你想要的一切提问你的问题

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

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

Working Demo

Answer 2

我可以看到很多问题......

1.需要两个相同的标记。

if (check1.checked == true) {

2. $("#i4")代替$("i4")

请放一个jsfiddle和你的条件

Answer 3

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

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

Answer 4

首先，你需要一个＃来获取它的javascript：

  $(document).ready(function(){

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

为什么？因为你寻找id i4。在CSS中你也用＃调用id 其次，你总是需要两个== for if语句（不用于初始化）：

if (check1.checked == true) {

顺便问一下你为什么要使用2种不同的表格？我建议下载js

Answer 5

获取所有已检查的无线电

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

如果选中id =“test”的元素，则进行Vefify

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

OR

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

Answer 6

我使用jQuery和类创建了一个JSFiddle显示一种方法。

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

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

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

6 个答案: