如何调用一个或两个或两个复选框和文本输入答案

【问题标题】：How to call one or two or both checked boxes and a text input如何调用一个或两个或两个复选框和文本输入
【发布时间】：2012-10-21 14:55:26
【问题描述】：

我知道这是一个非常基本的问题，但我对 JavaScript 完全陌生，所以我很绝望。我已经倾注了如何解决这个问题，但我无法弄清楚。我需要调用第一个标题或第二个标题或两者以及名称。我该怎么做呢？谢谢！！

<script type="text/javascript">
function ack(){
var name = document.forms[0].elements[0];
var nameValue = name.value;
var title1 = document.forms[0].elements[1];
var title1Value = title1.value;
var title2 = document.forms[0].elements[2];
var title2Value = title2.value;
alert("Thank you for ordering " +title1Value +title2Value +nameValue);
}
</script>

<form>
<h3>Now Available!</h3> <h4>Happy Traveling 2: More Layouts for the Travel Scrapbooker</h4><br/><br/>
<h3>Also available:</h3> <h4>Happy Traveling: Layouts for the Travel Scrapbooker</h4><br/><br/>
<h4>Order today!</h4><br/><br/>
<label>Name:</label>
<input type="text" id="name"/><br/><br/>
<input type="checkbox" id="title1" value="Happy Traveling"/>Happy Traveling<br/>
<input type="checkbox" id="title2" value="Happy Traveling 2"/>Happy Traveling 2<br/><br/>
<input type="submit" value="Submit" onclick="ack();"/>
</form>

【问题讨论】：

标签： javascript forms variables call

【解决方案1】：

一些建议：
1 使用document.getElementById("your id") 获取页面元素。它更高效、更易读。所以你的代码应该修改为：

var name = document.getElementById("name");

2 无论是否勾选，title1 的值总是返回“Happy Traveling”。你应该检查它是否被检查。您可以使用“已检查”属性。

var title1 = document.getElementById("title1");
var title1Value = "";
if(title1.checked){
    title1Value = title1.value;
}

3 在提交表单之前，您应该检查名称是否为空。
4 有关 javascript/html 的更多信息，请查看w3schools 了解更多详情。
希望对您有所帮助。

修改代码：

function ack(){
    var name = document.getElementById("name");
    var nameValue = name.value;
    var title1 = document.getElementById("title1");
    var title1Value = "";
    if(title1.checked){
        title1Value = title1.value;
    }
    var title2 = document.getElementById("title2");
    var title2Value = "";
    if(title2.checked){
        title2Value = title2.value;
    }
    alert("Thank you for ordering " +title1Value +title2Value +nameValue);
}

【讨论】：

【解决方案2】：

一些cmets：

表单控件必须有一个名称才能成功，ID 属性是可选的，通常不是必需的或有用的。表单控件可作为表单的命名属性使用其名称属性。所以不要使用会与表单的默认属性冲突的控件名称（如“名称”或“提交”）。

最后，不要在提交按钮上放置点击监听器，因为用户可以通过点击按钮以外的方式提交表单。将监听器交给表单的提交处理程序，这也意味着ack 函数可以通过返回false 来取消提交。

考虑：

<form id="orderForm" onsubmit="return ack();"> 
  <input type="text" name="personName"><br>
  <input type="checkbox" name="title1" value="Happy Traveling">Happy Traveling<br>
  <input type="checkbox" name="title2" value="Happy Traveling 2">Happy Traveling 2<br>
  <input type="submit" value="Submit">
</form>

<script type="text/javascript">

function ack() {
  var form = document.forms[0]; // or use getElementById
  var name = form.personName.value;
  var title1 = form.title1.checked? form.title1.value : '';
  var title2 = form.title2.checked? form.title2.value : '';

  alert('Thank you ' + name + ' for ordering:\n\n' + title1 + '\n' + title2);
}

</script>

【讨论】：