總是出現錯誤的單選按鈕值。怎麼了？

Question

這裏是

http://jsfiddle.net/littlesandra88/xksB9/

我本來期望的是「創建」按鈕返回一個空字符串，如果不選擇其單選按鈕我的問題的一個活生生的例子。而是從下面的表單中讀取單選按鈕的值。

底部的「保存」按鈕總是返回上面表格中的值。很奇怪！

下面是代碼

$(document).ready(function(){ 

    $('form').live('submit', function(){ 

     var title  = this.elements.title.value; 
     var owner  = this.elements.owner.value; 

     var type = $('input:radio[name=ctype]:checked').val() || ''; 

     alert(type); 

    }); 
}); 

的想法是，我會自動生成在底部類型的形式，所以不知道前手的ID的，所以我只是給他們隨機數使他們獨一無二。

這個問題怎麼解決？

Answer 1

您可能希望只是改變這一行：

var type = $('input:radio[name=ctype]:checked').val() || ''; 

到

var type = $('#create_form input:radio[name=ctype]:checked').val() || ''; 

這樣的jQuery只是看在最佳狀態，而不是在整個DOM。

不知道總體目標是什麼，但編輯至少會讓你找到你想要的行爲。

如果要在各個保存按鈕，以同樣的方式運作，將其更改爲：

var type = $(this).find('input:radio[name=ctype]:checked').val() || ''; 

編輯

要獲得其它形式的工作，你需要更改HTML有點讓表單標籤包裹表格，而不是相反。這是我改變了每一個來（注意，這將使而不是一個表的多個表）：

<form action="" method="post"> 
    <input name="anchor" value="54" type="hidden"> 
    <table class="alerts" cellspacing="0"> 
    <tbody> 
     <tr>         
     <td class="activity-data">54</td> 
     <td class="activity-data"> <input name="title" id="54_title" value="" type="text" /> </td> 
     <td class="activity-data"> <input name="owner" id="54_owner" value="" type="text" /> </td>   
     <td class="activity-data"> <input name="ctype" value="individuel" type="radio" checked/> Individuel <br> <input name="ctype" value="course" type="radio" /> Course </td> 
     <td> <input value="Save" type="submit" /></td> 
     </tr> 
    </tbody> 
    </table> 
</form> 

這樣，單選按鈕的形式適當的兒童和jQuery是高興。

Answer 2

每組單選按鈕都應該有自己的匹配名稱，因爲它看起來像表單將它們視爲單獨的組。例如，你的單選按鈕的第一組可能具有名稱foo：

<input name="foo" id="ctype" value="individuel" type="radio" /> Individuel <br/> 
<input name="foo" id="ctypee" value="course" type="radio" /> Course <br/> 

現在這些單選按鈕都是相同的無線電集團的一部分，和其他人是另一個組的一部分（雖然它們應該被命名爲也是彼此不同的）。現在，您可以安全地從foo單選按鈕組搶值：

$(document).ready(function(){ 

    $('form').live('submit', function(){ 

     var title  = this.elements.title.value; 
     var owner  = this.elements.owner.value; 

     // looking for 'foo' radio button group selection 
     var type = $('input:radio[name=foo]:checked').val() || ''; 

     alert(type); // alerts the correct selection from the top form 
    }); 
}); 

Answer 3

如果你看一下這行：

<input name="ctype" value="individuel" type="radio" checked/> 

你可以看到你已經包含在那裏「檢查」屬性。刪除它可以解決您在沒有選擇時返回'individuel'的問題。

哦，如果你要預先選擇一個值，它應該是

<input name="ctype" value="individuel" type="radio" checked="checked" /> 

注：這僅僅是添加到別人已經說過。