如何检测是否已使用jQuery选择了组中的一个单选按钮

Question

I'm 95% there in writing an HTML5 'required' attribute fallback, I'm having a small issue and I've come to the end of the road in my knowledge!

What works: Detecting 'required' attributes, looping through and alerting the user in several ways (onsubmit and entering data into the field).

Problem: I'm taking the form one step further and want to make checkboxes and radio buttons required as well. By doing this, I need to add a required attribute to each radio/checkbox. I need to find out how to differentiate the group of buttons, as currently you need to tick/untick both sets of buttons for the form to validate and let you submit. So in a nutshell, I have three required radios for example, each will need to be ticked, how can I detect whilst looping through the inputs that one of the required radios/checked is ticked - I assume this would be done by matching the 'name' attribute, and if none in the name group are selected then alert just one error.

Here's the state of my loop, you can see I detect the input type as well, just unsure of the next steps forward. a jsFiddle is also below if anyone would be kind enough to help out. Many thanks.

// loop through class name required
    $('.required').each(function () {

        // this
        var self = $(this)

        // check shorthand if statement for input[type] detection
        var checked = (self.is(':checkbox') || self.is(':radio')) ? self.is(':not(:checked)') : false

        // run the empty/not:checked test
        if (self.val() === '' || checked) {

            // show error if the values are empty still (or re-emptied)
            // this will fire after it's already been checked once
            self.siblings('.form-error').show()

            // stop form submitting
            e.preventDefault()

            // if it's passed the check
        } else {

            // hide the error
            self.siblings('.form-error').hide()

        }

    })

Here's my jsFiddle: http://jsfiddle.net/zykF9/

Answer 1

With class selectors you could archive it http://jsbin.com/owokuw/1/edit

UPDATE

to make easier to understand, here a update:

  <input type="radio" name="myradio"  class="myradio" />
<input type="radio" name="myradio"  class="myradio" />
<input type="radio" name="myradio"  class="myradio" />
<input type="radio" name="myradio"  class="myradio" />
  <input type="hidden"   id="selectedRadioYes" />
  <input type="button" id="botton" value="Botton" />

Jquery

$(".myradio").click(function(){
$("#selectedRadioYes").val(1);
});




$("#botton").click(function(){
  if($("#selectedRadioYes").val() === "1")
  alert("you can go on"); 
  else
   alert("need select one radio");

});

http://jsbin.com/owokuw/2/edit