2015-03-12 3 views
1

Я пытаюсь проверить раздел моей формы с помощью JS. Пользователь должен нажать одну из 3 переключателей. Если ни одно из них не выбрано, значение определенной переменной ($ planSelectValid) должно быть ложным. Если пользователь нажимает на один из радиостанций, он должен переключать значение на true. Из этого я могу позже проверить переменную, чтобы убедиться, что кнопка отправки должна быть активной.Проверка формы - Radio Loop

Я потратил много времени на это, и я не могу заставить его работать правильно. Я должен признать, что я все еще довольно зеленый, когда речь идет о JS. Что мне не хватает/делает неправильно? Любая помощь с этим наиболее ценится :)

Вот соответствующие части моего кода:

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> 
+0

$ ('socPlanRadios'). Find ('radio') не является правильным «радио» не является тегом, на который вы можете настроить его как $ («input [name = socPlan]») $ ("input [ name = socPlan] "). blur (ValidateRadioButtons); работает с вашим текущим кодом –

+0

@DeepakDavid Это работало как шарм! Большое вам спасибо! – BPmkt

+0

Не стоит беспокоиться .. В любое время ... –

ответ

1

Ну вы на самом деле не на правильном пути здесь, вы путаете вещи. Вот рабочая скрипку: 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"); 
     } 
    }) 
2

я реализовал другой способ сделать это. гляньте http://jsfiddle.net/gon250/eb4s1k11/

код:

$(document).ready(function(){ 

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

так что вы сохранили в test, если флажок установлен или нет.

Смежные вопросы