使用jquery验证单选按钮?

时间:2012-08-09 14:59:55

标签: jquery forms

如何使用jQuery验证这两个单选按钮?应该检查一个按钮:

<input type="radio" name="muuttuminen" value="Kylla" /> Kyllä
<input type="radio" name="muuttuminen" value="Ei"/>Ei

我知道如何验证常规文本输入字段,但我想知道这个。

     $(function() {
        $("#submit").click(function(){
 //validation part
          var dataString = $('#service-test').serialize();
          //alert (dataString);return false;
         $.ajax({
        type: "POST",
        url: "../quiz.php",
        data: dataString,
        dataType: "text",
        error: function(){ alert ('Nyt jotakin meni kyllä pahemman kerran pieleen. Yritä uudelleen?');
     },
        success: 
        function(data) {
     $("#resultcontainer").html(data);
     $("#service-test").hide();

       }

      });
      return false;

        });
      });               

5 个答案:

答案 0 :(得分:3)

您可以使用:checked选择器和length属性:

    $(".submit").click(function() {
       if ($('input[name="muuttuminen"]:checked').length == 0) {
         alert('please...');
         return false; } 
          else {
          $.ajax({
           //...
         })
       }
       return false;
    }); 

答案 1 :(得分:1)

你可以这样做,如下所示。

<强> Live Demo

$(function() {
    $("#submit").click(function() {     
      if($('input[type=radio][name=muuttuminen]:checked').length == 0)
      {
         alert("Please select atleast one");
         return false;
      }
      else
      {
          alert("radio button selected value: ");
      }      
    });
});

答案 2 :(得分:0)

您的代码非常不完整,但类似

var valid = false;

$('#yourForm').find(':input:radio').each(function(){
    if($(this).prop('checked'))
        valid = true;
});

if(!valid)
    return false;

答案 3 :(得分:0)

您可以使用checked pseudo-class。以下是您可能用于表单提交的小提琴。 http://jsfiddle.net/WhPcj/

答案 4 :(得分:0)

你可以这样做,jsFiddle example

$(function() {
    $("input[type=submit]").click(function() {
        var atLeastOneChecked = false;

        $("input[type=radio]").each(function() {
            if ($(this).attr("checked") == "checked") {
                atLeastOneChecked = true;
            }
        });

        if (!atLeastOneChecked) {
            $("#checked").text("Check one");
        } else {
            $("#checked").text("One is checked");
        }
    });
});​

这是一个通用示例,它将检查页面上的所有单选按钮,您可能不需要这样,因此将单选按钮放在一个组中并以这种方式检查组可能是值得的:

$("#inputgroup").find("input[type=radio]").each(function() {
    // do the validation here
});

检查这两个特定按钮的代码是:

$("input[type=radio][name=muuttuminen]").each(function() {
    // do the validation here
});