jQuery單選按鈕值驗證
[英]jQuery radio button value validation
問題描述
我以某種形式使用它來檢查單選按鈕組是否具有某個值（是/否）。 其中之一的HTML是：
<form id="registerHere">
<div class="control-group">
<label class="radio">
<input type="radio" value="Yes" name="freemedia">
Yes
</label>
<label class="radio">
<input type="radio" value="No" name="freemedia" checked="checked">
No
</label>
</div></form>
我正在使用以下JS（包括jQuery.validate.js）：
<script type="text/javascript">
$(document).ready(function(){});
$("#registerHere").validate({
rules:{
freemedia:{
required:true,
equalTo: "Yes"
},
},
messages:{
freemedia:{
required:"Please select",
equalTo:"Please apply to the 'freemedia' group first.</a>"
},
},
});
});
</script>
但是，它不正確地檢查該值，因為它始終向我顯示該消息，而不管是否選中“是”或“否”。
我要去哪里錯了？
3 個解決方案
解決方案1
5 已采納 2012-12-08 07:12:56
我清理了您的一些jQuery，您那里有一些錯誤。
另外，在插件中進行挖掘時，我注意到您可以使用“ equalTo”參數來指定需要哪個控件。 它僅使用“ equalTo”作為查詢的選擇器。 因此，如果您將“ equalTo”設置視為jQuery選擇器，則它應該可以工作。 可能有點hack，但我確實可以使用。
您需要做的就是為單選按鈕分配一個ID，您應該會很高興
<div class="control-group">
<label class="radio">
<input id="chkYes" type="radio" value="Yes" name="freemedia" />
Yes
</label>
<label id="chkNo" class="radio">
<input type="radio" value="No" name="freemedia" />
No
</label>
<input type="submit" value="Submit" />
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#registerHere").validate({
rules:
{
freemedia:
{
required: true,
equalTo: "#chkYes"
}
},
messages:
{
freemedia:
{
required: "Please select",
equalTo: "Please apply to the 'freemedia' group first."
}
}
});
});
</script>
解決方案2
0 2012-12-08 06:23:05
在jquery驗證插件中，“ equalTo”用於比較字段之間的值，而不是同一字段上的值。（如果有人對此有更多了解，這是我的研究。請讓我知道。）
您可以向其中添加自定義方法。
$.validator.addMethod("check_for_yes", function(value, element) {
return $('.freemedia').val() != "Yes"
}, "* Please apply to the 'freemedia' group first.");
驗證-
rules : {
freemedia : {
check_for_yes: true
}
}
要么
您可以通過顯示警報來檢查單選按鈕的Jquery click事件。
解決方案3
0 2012-12-08 06:36:57
您要檢查在提交表單時選擇的值，這是一種好的方法。給一個預定義的選定單選按鈕，然后在表單提交任務時檢查選定的單選，以完成此處的操作
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="radio" name="sex" value="Male" checked>Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown" >Unknown</input>
<div onclick="CheckMe();"> check Selected Radio button</div>
</body>
<script>
function CheckMe()
{
alert("value selected "+$('input:radio[name=sex]:checked').val());
}
</script>
</html>
現在，假設您默認情況下未選擇任何單選按鈕，那么您可以檢查用戶是否選擇了任何單選按鈕，以及是否選擇了什么？ 以下代碼可幫助您實現這一目標
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="radio" name="sex" value="Male">Male</input>
<input type="radio" name="sex" value="Female">Female</input>
<input type="radio" name="sex" value="Unknown">Unknown</input>
<div onclick="CheckMe();"> check Selected Radio button</div>
</body>
<script>
function CheckMe()
{
if ($('input:radio[name=sex]:checked').val())
alert("value selected "+ $('input:radio[name=sex]:checked').val());
else
alert("Please select Radio button");
}
</script>
</html>
請享用..！
jQuery單選按鈕驗證
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.