jQuery單選按鈕來顯示不同的東西依賴

我試圖用jQuery做的是讓我可以在同一組中使用三個單選按鈕。當選擇其中一個時，另外兩個不應該被激活。我希望能夠使用jQuery在最終結果中顯示單獨的HTML塊，但是我無法得到一些簡單的東西來運行我正在處理的內容。jQuery單選按鈕來顯示不同的東西依賴

這裏是我目前所面對的一起工作的代碼：

$(document.ready(function() 
{ 
    $("input[name='rdiobut']").change(function(){ 
     if ($("input['rdiobut']:checked".val() == 'a')) 
     $("#rdiocont").text("There is no expiration date."); 
     else if ($("input[name='rdiobut']:checked".val() == 'b')) 
     $("#rdiocont").text("Tell me how many days until expire"); 
     else ($("input[name='rdiobut']:checked".val() == 'c')) 
     $("#rdiocont").text("Pick the date to expire from a calendar"); 
    }); 
});

這裏是jQuery的那張表：

<tr><td>Expire Settings:</td><td>Does Not Expire: <input type="radio" name="rdiobut" value="a" checked="check" /> &nbsp;&nbsp;&nbsp;<strong>OR</strong> Expires By Days <input type="radio" name="rdiobut" value="b" /> &nbsp;&nbsp;&nbsp;<strong>OR</strong> Select a Date to Expire On <input type="radio" name="rdiobut" value="c" /></td></tr><tr id="rdiocont"><td>No Expiration Date</td></tr><tr id="rdiocont"><td>Expires by Days</td></tr><tr id="rdiocont"><td>Choose Expiration by Calendar</td></tr>

沒有人有任何建議或想法上我可能做錯了什麼？

來源

2012-12-14 Ryan

好的，你的代碼有一些錯誤。

jQuery的

$(document).ready(function() 
{ 
    $("input[name='rdiobut']").change(function(){ 
     if ($("input[name='rdiobut']:checked").val() == 'a') 
      $("#rdiocont").text("There is no expiration date."); 
     else if ($("input[name='rdiobut']:checked").val() == 'b') 
      $("#rdiocont").text("Tell me how many days until expire"); 
     else if ($("input[name='rdiobut']:checked").val() == 'c') 
      $("#rdiocont").text("Pick the date to expire from a calendar"); 
    }); 
});

HTML

<table> 
    <tr> 
     <td>Expire Settings:</td> 

     <td> 
      Does Not Expire: 
      <input type="radio" name="rdiobut" value="a" checked="checked" /> &nbsp;&nbsp;&nbsp; 
      <strong>OR</strong> 
      Expires By Days 
      <input type="radio" name="rdiobut" value="b" /> &nbsp;&nbsp;&nbsp; 
      <strong>OR</strong> 
      Select a Date to Expire On 
      <input type="radio" name="rdiobut" value="c" /> 
     </td> 
    </tr> 

    <tr id="rdiocont"> 
     <td>(Select an option)</td> 
    </tr> 

</table>

一些注意事項：在這裏，你擁有它，都像我想你想它（working example）清理和工作：

不要對各種元素使用相同的ID（例如您在<tr id="rdiocont">中使用）;
這是$(document).ready，不$(document.ready - 觀察收盤)
像@Ryan說，不評價else語句表達。如果你真的想評估表達式，繼續使用else if（這不是強制性的有一個else語句）。
在您的第一次評估中，它是input[name='rdiobut']而不是input['rdiobut']。你也沒有關閉後:checked"

來源

2012-12-14 22:31:57

謝謝。該腳本完全符合我的要求。我一直在遍地搜尋，以確定我是如何設置錯誤的。我非常感謝你的幫助。 – Ryan

首先，您的最後一個else語句，您試圖評估一個表達式，就好像它是一個if語句。

其次，這是單選按鈕的默認行爲，只要它們具有相同的名稱即可。

來源

2012-12-14 21:36:40

想法是，如果一個按鈕被選中，它顯示了一個事情，其他兩個按鈕沒有。而如果選擇了另一個按鈕，則會顯示不同的內容。我知道這是默認的;但我不確定我在哪裏設置全部錯誤。 – Ryan

jQuery單選按鈕來顯示不同的東西依賴

回答

相關問題