表格验证 - 无线电循环

Question

I am trying to validate a section of my form using JS. The user should click one of 3 radio buttons. If none of them are selected, the value of a certain variable ($planSelectValid) should be false. If the user clicks one of the radios, it should switch the value to true. From this, I can later check the variable to ascertain whether the submit button should be active.

I have spent a good amount of time on this and I cannot seem to get this to work correctly. I have to admit that I am still rather green when it comes to JS. What am I missing/doing-wrong? Any help with this is most appreciated :)

Here are the relevant parts of my code:

HTML
<div class="socPlanRadios">
    <p>
        <input type="radio" name="socPlan" value="Plan 1" id="plan1">
        <label for="plan1"><b>Plan 1</b></label>
    </p>
    <p>
        <input type="radio" name="socPlan" value="Plan 2" id="plan2">
        <label for="plan2"><b>Plan 2</b></label>
    </p>
    <p>
        <input type="radio" name="socPlan" value="Plan 3" id="plan3">
        <label for="plan2"><b>Plan 3</b></label>
    </p>

</div>

JS
<script>
    $planSelectValid = false;

    function ValidateRadioButtons() {  //Function for Validating If Radio Button isselected

    $('.socPlanRadios').find('radio').each(function () {  //LoopingthroughradioButtons
        if ($(this).is(':checked')) {
            $planSelectValid = true; 
        }
    });

    if ($planSelectValid = true) {
        alert("Validation Passed");
      } else {
        alert("Please select a Radio Button");
      }
    }

    $('.socPlanRadios').find('radio').blur(ValidateRadioButtons);
</script>

Answer 1

I have implemented a different way to do this. take a look http://jsfiddle.net/gon250/eb4s1k11/

code:

$(document).ready(function(){

    $('#mybtn').on('click', function(){
        var test = $('[name="socPlan"]').is(':checked');
        alert(test);
    });
});

so you have stored in test if it's checked or not.

Answer 2

Well you are not really on the right path here, you are mixing up stuff. Here is a working fiddle: http://jsfiddle.net/vL9jvwe7/1/

 $planSelectValid = false;

    $('input').click(function () {  //Function for Validating If Radio Button isselected

    $('.socPlanRadios').find('radio').each(function () {  //LoopingthroughradioButtons
        if ($(this).is(':checked')) {

            $planSelectValid = true; 

        }
    });

    if ($planSelectValid = true) {
        alert("Validation Passed");

      } else {
        alert("Please select a Radio Button");
      }
    })