javascript需要複選框從複選框數組中檢查

我currenlty有一些javascript/jquery代碼顯示錯誤消息，如果沒有框被選中。但是，當我檢查一個框並提交表單時，錯誤消息仍然顯示。javascript需要複選框從複選框數組中檢查

任何幫助將是偉大的！

JavaScript代碼：

var hobbies = $('#hobbies').val(); 
    if ($('#hobbies :checkbox:checked').length === 0){ 
    $("#multichk").after('<span class="error">Please choose at least one.</span>'); 
    hasError = true; 
    }

的html代碼：

<input type='checkbox' id='hobbies' name='hobbies[0]' value='1'/><label for='hobbies0'>football</label><br /> 

<input type='checkbox' id='hobbies' name='hobbies[1]' value='2'/><label for='hobbies1'>soccer</label><br /> 

<input type='checkbox' id='hobbies' name='hobbies[2]' value='3'/><label for='hobbies2'>baseball</label><br /> 

<input type='checkbox' id='hobbies' name='hobbies[3]' value='4'/><label for='hobbies3'>tennis</label><br /> 

<input type='hidden' id='multichk' />

謝謝。

來源

2012-05-25 dan

請發佈提交表單的代碼。提交後可能只需要隱藏錯誤。例如：'$（「。error」）。hide（）' –

無效的HTML有多個元素具有相同的id，所以最好將控件放在其標籤內（因此點擊標籤檢查控制），最後，不要對HTML元素使用XML標記。 – RobG

您將複選框命名和標識的方式，它們將不會屬於同一組，並且它們將不會被正確識別。

頁面上的每個元素在被識別時都必須具有唯一的ID，並且對於一組複選框或單選按鈕來進行驗證並作爲一個組來傳遞，組中的每個成員都必須具有一樣的名字。

根據這些規則，標籤標籤的for屬性引用元素的id屬性而不是它的name屬性應該不令人驚訝。現在

，我猜你正在使用PHP的服務器端語言（基於複選框名括號），在這種情況下，複選框應該聲明如下所示：

<input type='checkbox' id='hobbies0' name='hobbies[]' value='1'/> 
<label for='hobbies0'>football</label><br /> 

<input type='checkbox' id='hobbies1' name='hobbies[]' value='2'/> 
<label for='hobbies1'>soccer</label><br /> 

<input type='checkbox' id='hobbies2' name='hobbies[]' value='3'/> 
<label for='hobbies2'>baseball</label><br /> 

<input type='checkbox' id='hobbies3' name='hobbies[]' value='4'/> 
<label for='hobbies3'>tennis</label><br />

[注：標籤僅移到下一行，以消除代碼框中水平滾動]

隨着理順HTML，jQuery的會是這個樣子：

if($('input:checkbox[name="hobbies[]"]:checked').length === 0){ 
    $("#multichk").after('<span class="error">Please choose at least one.</span>'); 
    hasError = true; 
}

Reference for selector format

如果選擇仍然給你帶來麻煩，那麼你可能需要前綴的方括號用雙反斜線這樣的：

if($('input:checkbox[name="hobbies\\[\\]"]:checked').length === 0){

Reference for double backslashes

希望這有助於

來源

2012-05-25 03:00:08 jimmym715

對不起，這個ID是我的錯誤。我的ID有唯一的名稱，就像我的標籤名稱一樣。 – dan

哦，geeze工作完美!!!!!!!!!!!!謝謝！短碼也是！我做的唯一改變是name = to class = – dan

從技術上講，您的HTML無效;具有相同ID的多個元素是非法的。您應該使用類別選擇器而不是ID選擇器...

無論如何，最簡單的方法是將跨度放在那裏並在有人選中複選框時將其清除。

<input type='checkbox' id='hobbies' name='hobbies[0]' value='1'/><label for='hobbies0'>football</label><br /> 

<input type='checkbox' id='hobbies' name='hobbies[1]' value='2'/><label for='hobbies1'>soccer</label><br /> 

<input type='checkbox' id='hobbies' name='hobbies[2]' value='3'/><label for='hobbies2'>baseball</label><br /> 

<input type='checkbox' id='hobbies' name='hobbies[3]' value='4'/><label for='hobbies3'>tennis</label><br /> 

<input type='hidden' id='multichk' /> 

<span id="error_message" class="error"></span>

那麼你的JS：

var hobbies = $('#hobbies').val(); 
if ($('#hobbies:checked').length === 0) { 
    $('#error_message').innerHTML('Please choose at least one.'); 
    hasError = true; 
} else { 
    $('#error_message').innerHTML(''); 
    hasError = false; 
}

您可以重置它，每當他們點擊通過建立一個處理一個複選框：

function changed(checkbox) { 
    return function() { 
    if (checkbox.checked) { 
     $('#error_message').innerHTML(''); 
     hasError = false; 
    } 
    } 
} 

var checkboxes = document.querySelector('#hobbies') 
for (var i=0; i<checkboxes.length; ++i) { 
    checkboxes[i].onchange = changed(checkboxes[i]);

以上是理念;工作代碼this fiddle。

來源

2012-05-25 02:50:45

javascript需要複選框從複選框數組中檢查

回答

相關問題