Javascript单选按钮-尝试只选择选中的按钮

Javascript radio buttons - trying to select only checked button

本文关键字：按钮 选择 单选按钮 Javascript      更新时间：2023-09-26

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

这是我的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();
        };
    });
});

提前感谢！

编辑：谢谢大家的回答，他们真的很有帮助。我现在已经在这个项目上做了很多工作，并且认为我已经完成了功能——它在这个代码笔上

第一次您忘记将#添加到$（"i4"）

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

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

演示

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

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

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

工作演示

我能看到很多问题。。。

1.要求两个相等的分数。

if (check1.checked == true) {

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

请放一个jsfiddle和您的条件

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

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

因此，首先，您需要一个#来在javascript:中获取它

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

为什么？因为你在寻找id i4。在CSS中，您还可以使用#其次，对于if语句，您总是需要两个==（不用于初始化）：

if (check1.checked == true) {

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

获取所有已检查的无线电

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

如果id为"test"的元素已检查，则Vefify

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

或

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

我制作了一个JSFiddle，展示了使用jQuery和类实现这一点的一种方法。

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(); 
});
相关文章：