![](/img/trans.png)
[英]Validation in React Hook Form to make sure at least one checkbox is checked?
[英]How do I make sure that at least one checkbox is checked?
我正在使用其值來自數據庫的復選框。 它的名字是一樣的,但是名字是這樣的:
<input type="checkbox" id="chkBankServices" name="<%=bs.getServiceID()%>">
<%=bs.getServiceDesc()%>
通過這個我從數據庫中獲取值。 現在我必須驗證應該選擇至少一個復選框..
如果有人可以幫助我,我將感謝你。 如果我給這樣的javascript代碼:
var services = document.getElementsById( 'chkBankServices' );
if(!(services[0].checked) &&
!(services[1].checked) &&
!(services[2].checked) &&
!(services[3].checked) &&
!(services[4].checked) &&
!(services[5].checked) &&
!(services[6].checked) &&
!(services[7].checked) &&
!(services[8].checked))
{
alert( "Please select at least one service to submit." );
return false;
}
它沒有給出任何警告信息。 這有什么不對的。 Plz幫助我......提前謝謝
在jQuery中:
alert( $("#chkBankServices input[type=checkbox]:checked").length > 0 );
嘗試這個:
var services = document.getElementById( 'chkBankServices' );
var checkboxes = services.getElementsByTagName('input');
var checked = false;
for (var i=0,i0=checkboxes.length;i<i0;i++)
if (checkboxes[i].type.toLowerCase()=="checkbox")
{
if (checkboxes[i].checked) checked = true;
}
接着:
if (!checked)
{
alert('Not checked');
return false;
}
沒有getElementsById方法,因為只應該有一個具有給定id的元素。 也許你打算使用getElementsByName ? 這允許返回多個元素。
由於這確實是客戶端問題,如果您可以發布生成的HTML示例,我們可以為您提供更多指導。
您是否檢查了渲染的來源以確保您的復選框被賦予了預期的名稱?
我不知道這是否會幫助您解決您的具體問題,但如果您避免使用大量if塊並使用循環代碼,則代碼將更容易閱讀:
var checked = false;
for(var i=0;i<services.length;i++){
if(services[i].checked){
checked = true;
}
}
if(!checked){
alert( "Please select at least one service to submit." );
return false;
}
看看你的代碼,我打賭你在某種轉發器中有那個復選框,並創建了多個具有相同ID的復選框,這是無效的html。 我會將它包裝在div / span或具有如下id的內容中:
if (!isSomethingChecked()) {
alert( "Please select at least one service to submit." );
return false;
}
function isSomethingChecked() {
var parent = document.getElementById("chkBankServices");
for (var child in parent.childNodes) {
var node = parent.childNodes[child];
if (node && node.tagName === "INPUT" && node.checked) {
return true;
}
}
return false;
}
我假設HTML看起來像:
<div id="chkBankServices">
<input type="checkbox" id="Checkbox1" />
<input type="checkbox" id="Checkbox2" checked="checked"/>
<input type="checkbox" id="Checkbox3" checked="checked"/>
<input type="checkbox" id="Checkbox4" />
<input type="checkbox" id="Checkbox5" />
<input type="checkbox" id="Checkbox6" />
<input type="checkbox" id="Checkbox7" />
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.