更改隱藏單選按鈕

我有三個單選按鈕，如bc，我希望如果我點擊b，另外三個單選按鈕變爲可見下面。我已經編寫了單選按鈕的代碼，但我不知道要隱藏並顯示下面這些變化的單選按鈕。我已經試過這種方式，但不能把它做更改隱藏單選按鈕

$(document).on('change','#quarterly',function(){ 
    $("input:radio[name='FIRST'],input:radio[name='SECOND']").hide(); 
});

季度是該按鈕上，我想改變請幫忙的ID !!!!! 下面是HTML

期年季度每月期

首先

第二
三

來源

2016-12-02 Danish Bhatti

你能告訴我們任何html嗎？ – Pete

@Dekel，沒有爲我工作 –

@DanishBhatti，你是否運行的例子？ – Dekel

有幾件事情需要注意：

沒有:radio CSS選擇器。
通常，當我們使用radio按鈕時，我們不使用ids（但名字），因爲他們按照他們的名字分組單選按鈕。
最好檢查實際值（使用$(this).val()）。

這裏是一個工作示例：

$(document).on('change','input[type=radio][name=opt]',function() { 
 
    if ($(this).val() == 'opt2') { 
 
    $("input[type='radio'][name='FIRST'],input[type='radio'][name='SECOND']").show(); 
 
    } else { 
 
    $("input[type='radio'][name='FIRST'],input[type='radio'][name='SECOND']").hide(); 
 
    } 
 
});

input[name='FIRST'], input[name='SECOND'] { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input name="opt" type="radio" value="opt1" checked="checked" /> opt1 <br /> 
 
<input name="opt" type="radio" value="opt2" /> opt2 <br /> 
 
<input name="FIRST" type="radio" /> <br /> 
 
<input name="SECOND" type="radio" /> <br />

來源

2016-12-02 12:03:26 Dekel

@ImranQamer，問題中的html在我的答案在這裏後大約一個小時發佈:)這個答案是通用的（沒有OP提供的信息）。 – Dekel

在html中發佈的問題沒有電臺名稱第一，第二，我認爲你的解決方案不適用於上述情況。 –

好吧，我現在正在尋找html並不存在。 –

我厭倦了這一點，它的工作！

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery Show Hide Elements Using Radio Buttons</title> 
<style type="text/css"> 
    .box{ 
     padding: 20px; 
     display: none; 
     margin-top: 20px; 
     border: 1px solid #000; 
    } 
    .red{ background: #ff0000; } 
    .green{ background: #00ff00; } 
    .blue{ background: #0000ff; } 
</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
      $("#buttonsClick").hide(); 
    $('input[type="radio"]').click(function(){ 
     if($(this).attr("value")=="red"){ 

      $("#buttonsClick").show(); 
     } 
     if($(this).attr("value")=="green"){ 
      $(".box").not(".green").hide(); 
      $(".green").show(); 
     } 
     if($(this).attr("value")=="blue"){ 
      $(".box").not(".blue").hide(); 
      $(".blue").show(); 
     } 
    }); 
}); 
</script> 
</head> 
<body> 
    <div> 
     <label><input type="radio" name="colorRadio" value="red"> red</label> 
     <label><input type="radio" name="colorRadio" value="green"> green</label> 
     <label><input type="radio" name="colorRadio" value="blue"> blue</label> 
    </div> 
    <div class="red box">You have selected <strong>red radio button</strong> so i am here</div> 
    <div class="green box">You have selected <strong>green radio button</strong> so i am here</div> 
    <div class="blue box">You have selected <strong>blue radio button</strong> so i am here</div> 
    <div id="buttonsClick"> 
     <input type="radio" name="colorRadio" value="red"> red 
     <input type="radio" name="colorRadio" value="green"> green 
     <input type="radio" name="colorRadio" value="blue"> blue 
    </div> 
</body> 
</html>

在文檔被加載時，隱藏在div含有如在示例中所示的單選按鈕和的onclick元件的功能使用.show（）屬性和工作完成！

來源

2016-12-02 12:12:47

使用此代碼

$(document).on('change','#quarterly',function(){ 
    $("#FIRST").parent(".row").hide(); 
    $("#SECOND").parent(".row").hide(); 
    $("#THIRD").parent(".row").hide(); 
});

$(document).on('change','#quarterly',function(){ 
    $("#FIRST").closest(".row").hide(); 
    $("#SECOND").closest(".row").hide(); 
    $("#THIRD").closest(".row").hide(); 
});

因爲在你的情況FIRST,SECOND,THIRD是id，而不是名字。

來源

2016-12-02 13:00:53

更改隱藏單選按鈕

回答

相關問題