Question

我正在尝试使用JS验证表单的一部分。用户应单击3个单选按钮中的一个。如果未选择任何一个，则某个变量（$ planSelectValid）的值应为false。如果用户单击其中一个无线电，则应将该值切换为true。由此，我可以稍后检查变量以确定提交按钮是否应该是活动的。

我花了很多时间在这上面，我似乎无法让它正常工作。我不得不承认，在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>

Answer 1

我已经采用了不同的方法来实现这一目标。看看http://jsfiddle.net/gon250/eb4s1k11/

代码：

$(document).ready(function(){

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

因此，如果已选中，则存储在test中。

Answer 2

嗯，你在这里并没有真正走在正确的道路上，你正在混淆东西。这是一个工作小提琴：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 个答案: