javascript - 使用 javascript 来制作所需的东西

Question

作为我创建的表单的一部分，用户可以选择是否要发布订单或领取订单。当他们从单选按钮中做出选择时，即会显示适当的 div，即当他们选择邮资时，会出现用于输入送货地址的输入，如果他们选择收集，则会出现一个下拉框，供他们选择他们想要的商店去收集。

所以我试图通过使用 JavaScript 来要求输入或下拉框，但我所做的不起作用，我不明白为什么，因为我之前做过类似的事情并且它已经工作过没有问题。

这是 html:

<p>Would you like postage(£7.25 extra) or to collect from one of our shops?</p>

<label class="checkbox-inline"></label>
<input type="radio" required name="delivery[]" onchange="calc()" class="deliv" id="delivery" data-descTarget="k_0" value="7.25">Postage


<label class="checkbox-inline"></label>
<input type="radio" name="delivery[]" class="deliv" onchange="calc()"  id="collection" data-descTarget="k_1" value="0"/>Collection

    <div id="k_0" class="desc">
<label>Please enter your delivery address</label>
<table border="0" cellpadding="0" id="table2">

<tr>
<td align="right">Name</font></td>
<td><input type="text" name="name1" id="name"  size="15" tabindex="1"></td>
</tr>
<tr>
<td align="right">Email</font> 
(Your confirmation will be sent here): </td>
<td><input type="text" name="email1" id="email" size="20" tabindex="1"></td>
</tr>
<tr>
<td align="right">Phone number:</td>
<td><input type="text" name="number1" id="number" size="15" tabindex="1"></td>
</tr>
<tr>
<td align="right">Address:</td>
<td><input type="text" name="address1" id="address" size="15" tabindex="1"></td>
</tr>
<tr>
<td align="right">Town:</td>
<td><input type="text" name="town1" id="town" size="15" tabindex="1"></td>
</tr>
<tr>
<td align="right">Postcode:</td>
<td><input type="text" name="postcode1" id="postcode" size="15" tabindex="1"></td>
</tr>
<tr>
<td align="right">County:</td>
<td><input type="text" name="county1" id="county" size="15" tabindex="1"></td>
</tr>
</table> 
    </div>
    <div id="k_1" class="desc">
   <div class="select-style">
<label>Collection Point</label> 
<select id="collect"  name="collect">
<option value="None" selected="selected">Select One</option>
<option value="Alford" >Alford</option>
<option value="Auld Toon" >Auld Toon</option>
<option value="Banff" >Banff</option>
<option value="Emmas">Emmas</option>
<option value="Insch" >Insch</option>
<option value="Kemnay" >Kemnay</option>
<option value="Market Place" >Market Place</option>
<option value="Mastrick"> Mastrick</option>
<option value="Meldrum Bakery" >Meldrum Bakery</option>
<option value="North Street" >North Street</option>
<option value="Rousay" >Rousay</option>
<option value="Seafield Street" >Seafield Street </option>
<option value="St Machar" >St Machar </option>
<option value="St Swithin" >St Swithin Street </option>
<option value="Stonehaven" >Stonehaven</option>
<option value="Torry" >Torry</option>
<option value="Keystore Old Aberdeen" >Keystore Old Aberdeen</option>
<option value="Keystore Old Meldrum" >Keystore Old Meldrum </option>
<option value="Highclere" >Highclere</option>
</select>
</div>
    </div>
<input type='submit' id='submit' name="submit" onClick="checkValue()"  class="submit" value='Submit' />

这是隐藏 div 的脚本，直到选择适当的单选按钮:

<script type="text/javascript">
$(document).ready(function() {
  $("div.desc").hide();
  $("input[name$='delivery[]']").click(function() {
    var choice = $(this).attr("data-descTarget");
    $("div.desc").hide();
    $("#" + choice).show();
  });
});

</script>

这是我尝试将字段设为必填的方法:

function checkValue() {

    if (document.getElementById('delivery').checked) {
      document.getElementsByName("name1").required = true;
      document.getElementsByName("email1").required = true;
      document.getElementsByName("number1").required = true;
      document.getElementsByName("address1").required = true;
      document.getElementsByName("town1").required = true;
      document.getElementsByName("postcode1").required = true;
      document.getElementsByName("county1").required = true;
      document.getElementById("collect").required = false;


} else if (document.getElementById('collection').checked) {
            document.getElementById("collect").required = true;
            document.getElementsByName("name1").required = false;
            document.getElementsByName("email1").required = false;
            document.getElementsByName("number1").required = false;
            document.getElementsByName("address1").required = false;
            document.getElementsByName("town1").required = false;
            document.getElementsByName("postcode1").required = false;
            document.getElementsByName("county1").required = false;

}


}

我的 checkValue 脚本哪里出了问题？

Answer 1

我在这里使用了JQuery，因为您已经在使用它，但是此函数将更新您正在寻找的输入，并使其更容易更新并添加/删除字段我使用了一组输入 id 来循环，而不是像您那样对每个字段进行硬编码。

function updateRequiredFields (isCollecting){

    var deliveryFields = ["name","email","number", "address", "town", "postcode", "county"];

    for(var x = 0; x < deliveryFields.length; x++){
        $("#" + deliveryFields[x]).attr("required", !isCollecting);
    }

    $("#collect").attr("required", isCollecting);
}

编辑:更新评论。

您的输入并未包装在表单内，在将它们包装在表单中后，它会按预期工作。