Question

当在这个“形式”中选择单选按钮时，我应该获得所选单选按钮的值，而不是我未定义。可能的原因是什么，我该如何解决？ JSFIddle https://jsfiddle.net/uzuwheq4/

HTML

<div id="step2">
                    <span class="product" href="#" id="plan"><div class="plan" style="background-image:url(media/images/plan1.jpg);"><input class="radio" type="radio" value="plan1" name="plan"/></div><p>Enkel bankskiva</p></span>
                    <span class="product" href="#" id="plan"><div class="plan"  style="background-image:url(media/images/plan2.jpg);"><input class="radio" type="radio" value="plan2" name="plan"/></div><p>L-form</p></span>
                    <span class="product" href="#" id="plan"><div class="plan"  style="background-image:url(media/images/plan3.jpg);"><input class="radio" type="radio" value="plan3" name="plan"/></div><p>U-form</p></span>
                    <span class="product" href="#" id="plan"><div class="plan"  style="background-image:url(media/images/plan4.jpg);"><input class="radio" type="radio" value="plan4" name="plan"/></div><p>Mattbestallning</p></span>
                    <button type="button" class="nasta" onClick="processStep2()">Nasta</button>
                    <h3 id="alert2">Please select a plan to proceed</h3>
                </div>

JQuery的

function _(x){
    return document.getElementById(x);
}

function processStep2(){
    plan = _('[name="plan"]').value;
    if ($(".radio").is(":checked")) {
     alert (plan);
        $("#phase2").removeClass("phase");
        $("#phase3").removeClass("main_list");
        $("#phase2").addClass("main_list");
        $("#phase3").addClass("phase");
    } else {
       $("#alert2").show();

    }

}

Answer 1

试试这个。

plan = $("#plan input[type='radio']:checked").val();

认为你应该记住。

不要对不同的元素使用相同的ID。
如果您使用的是jQuery，则不需要_(x)函数，因为$("#elementID")与document.getElementById(elementID);相同

Answer 2

首先，你正在检查错误的元素。变化

plan = _("plan").value;

到

var plan = $('[name="plan"]:checked').val();

第二件事是--id属性应该只引用一个DOM元素=）

Answer 3

我会改变一些事情，但我会坚持基本问题。我将代码中的第一行更改为：

<div class="container-fluid adjustedHeight">
  <div class="video-container">
    <video autoplay loop class="fillWidth">
      <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
      Your browser does not support the video tag. I suggest you upgrade your browser.</video>
</div>

这只会显示＆＃34; plan1＆＃34;或者＆＃34; plan2＆＃34;等因为这是你的单选按钮上定义的值。如果要获取p标记中的值，则必须遍历树以获取该值。我假设这是你真正想要的，所以我更新我的答案，包括这个代码。首先，你的html稍有改动。我正在移动结束div来封装p标签，我试图尽可能地保留你的原始版本。

    plan =$("input[name=plan]:checked").val();

然后您的processStep2函数的第一行应为：

    <div id="step2">  
       <span class="product" href="#" id="plan"><div class="plan"style="background-image:url(media/images/plan1.jpg);"><input class="radio" type="radio" value="plan1" name="plan"/><p>Enkel bankskiva</p></div></span>
       <span class="product" href="#" id="pl("plan").van"><div class="plan"  style="background-image:url(media/images/plan2.jpg);"><input lass="radio" type="radio" value="plan2" name="plan"/><p>L-form</p></div></span>                                 
       <span class="product" href="#" id="plan"><div class="plan"  style="background-image:url(media/images/plan3.jpg);"><input class="radio" type="radio" value="plan3" name="plan"/><p>U-form</p></div></span>
       <span class="product" href="#" d="plan"><div class="plan"  style="background-image:url(media/images/plan4.jpg);"><input class="radio" type="radio" value="plan4" name="plan"/><p>Mattbestallning</p></div></span>
       <button type="button" class="nasta" onClick="processStep2()">Nasta</button>
       <h3 id="alert2">Please select a plan to proceed</h3>
                </div>

这将吐出＆＃34; Enkel bankskiva＆＃34;，＆＃34; L-form＆＃34;，＆＃34; U-form＆＃34;，＆＃34; Mattbestallning＆＃34;

为什么我得到未定义而不是选定的值？

3 个答案: