jQuery，如何指示至少一個組中的一個複選框是必需的

Question

首先讓我感謝你們所有人爲你的驚人的努力和幫助，迄今爲止。現在回答這個問題。

我有五個複選框，並且需要檢查五個中的至少一個以根據需要進行驗證。

我已經看到了如何做到這一點的一些方法，但我似乎無法使任何工作。

Solve One Solve Two

現在我同時使用驗證插件和元數據的插件。我怎麼能輕鬆地說，如果一個類0123'複選框被選中，其餘不再需要？我也給所有的複選框class="required"

一如既往的在此先感謝！

編輯：我對不恰當地措詞這個問題表示歉意。我會使用單選按鈕或選擇，因爲它很容易，但要求我使用複選框。再次感謝您的寶貴時間，併爲此感到抱歉。

FINAL EDIT 所以這裏是我如何做到這一點，以防其他人需要。

jQuery.validator.addMethod('ClassAppliedToCheckBoxes', function(value, element, checked) { 
      var $module = $(element).parents('.YourContainerClass'); 
      return $module.find('input:checked').length; 
      }); 

      jQuery.validator.addClassRules("ClassAppliedToCheckBoxes", { 
        'ClassAppliedToCheckBoxes' : true 
      }); 

      jQuery.validator.messages.required_group = 'Please check at least one of these fields.'; 

Answer 1

請不要這樣做。從可用性的角度來看，這是一種可怕的做法。只要用戶看到複選框，他們就會認爲會有多個選擇。對於單選，我們有放射性元素。給他們所有人同名，他們將是獨家。

實施例：

I am a:<br/> 
<input type="radio" id="age_old" name="age" value="old"> 
    <label for="age_old">Oldtimer</label><br/> 
<input type="radio" id="age_mid" name="age" value="mid" checked> 
    <label for="age_mid">Middle-aged</label><br/> 
<input type="radio" id="age_young" name="age" value="young"> 
    <label for="age_young">Youth</label><br/> 

加成：無JavaScript的需要 - 所有普通的HTML。如果您需要任何選擇的能力，只需添加另一個單選框一個空值：

<input type="radio" id="age_no" name="age" value=""> 
    <label for="age_no">...not telling!</label><br/> 

UPDATE：有人指出，這不是一個問題是關於什麼。如果是這種情況，並且需要其他閱讀（「至少需要設置一個複選框」），請忽略此操作。

Answer 2

嘗試這樣：

var $invalid = $(":checkbox.required").filter(function() { 
    var n = this.name; 
    return $(":checkbox[name='" + n "']:checked").length == 0; 
}); 

從那裏，你可以做一些事情。要停止表單提交，請檢查長度是否大於零（如果是，則存在一些無效的表單）。爲了突出無效答卷：

$invalid.parent().css({ color: '#f00' }); 

請注意，這並不是一個非常高效的算法：它將對同一組內的支票多次有複選框。如果這是一個瓶頸，那麼有一個地方可以改進，但無論如何這將是一個很好的起點。

Answer 3

我同意Amadan複選框不是要走的路。複選框有多種選擇。如果你正在尋找使形式訪問，然後使之成爲SELECT：

<label for="myselect">Choose type of house</label> 

<select name="myselect" id="myselect" class="required"> 
    <option value="1">Option 1 Text</option> 
    <option value="2">Option 2 Text</option> 
    <option value="3">Option 3 Text</option> 
    <option value="4">Option 4 Text</option> 
    <option value="5">Option 5 Text</option> 
</select> 

這會使你的形式更加善待人誰與屏幕閱讀器導航吧。 Radio buttons causes some issues適用於通過表單進行選擇的人。