Javascript單選按鈕 - 試圖只選中選中的按鈕

-1

我想寫一些代碼，只顯示某些內容時，單選按鈕組合檢查。不幸的是，我迄今爲止所做的似乎並不奏效 - 出於某種原因，即使第二個單選按鈕未被選中，內容也會顯示。Javascript單選按鈕 - 試圖只選中選中的按鈕

這裏是我的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

來源

2015-11-18 sim89

如果（check1.checked ==真）{應該有兩個相同的標誌 –

有很多問題，我可以看到...

1.two需要平等的痕跡。

if (check1.checked == true) {

2. $("#i4")而不是$("i4")

請把的jsfiddle和你的條件

來源

2015-11-18 13:31:32

首先你忘了添加＃到$（「6-14」）

第二使用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

來源

2015-11-18 13:32:22

感謝 - 這是真正的幫助。這是Codepen的全部功能（我希望）[鏈接]（http://codepen.io/sim89/pen/BobRxL） – sim89

@ sim89是Codepen的工作原理？或者你想修改它？ –

它工作正如我想我相信 - 只是想讓你知道它已修復。它基於來自兩種形式的選擇的梳理來顯示信息。 – sim89

我想我找到了答案。在if語句，關節外=，所以

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

來源

2015-11-18 13:32:45

因此，首先，你需要一個＃得到它在你的JavaScript：

$(document).ready(function(){ 

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

爲什麼？因爲你在尋找id i4。你爲什麼要使用兩種不同的形式

if (check1.checked == true) {

而且順便說一句：在CSS，你還打電話跟＃其次一個id，你總是需要if語句（不適用於初始化）兩大==？我建議下載JS

來源

2015-11-18 13:37:35 Sundaze

獲取所有檢查收音機

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

Vefify如果使用id = 「測試」的元素被選中

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

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

來源

2015-11-18 13:38:57 RiccardoC

我做了一個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(); 
});

來源

2015-11-18 13:52:32 Arg0n

Javascript單選按鈕 - 試圖只選中選中的按鈕

回答

相關問題