Question

我遇到的问题是我的复选框似乎无关紧要。处理我的表单文本时显示未选中的框。我希望最终结果只显示勾选的框。我的结果中显示的信息太多了。

或者更容易丢弃复选框并使用下拉列表，如果是这样，我如何能够为每个下拉框项目分配价格？复选框是我对这个想法的替代方案，我似乎仍然遇到了麻烦

提前致谢

这是我的HTML：

<html>
<head>
<title>Movie Ticket Prices</title>
<!-- script src="movie.js" type="text/javascript"></script -->
<script src="movie.js" type="text/javascript"></script>
<noscript>Your browser does not support JavaScript!</noscript>
</head>
<body>
<form name="form1">

<div> Choose a movie: 
<select name="movie" id="movie">
 <option value="Never say never">Never say never</option>
 <option value="Hop">Hop</option>
 <option value="Rio">Rio</option>
</select>
</div>

<div> Choose a Day: 
<select name="day" id="day">
 <option value="Sunday">Sunday</option>
 <option value="Monday">Monday</option>
 <option value="Tuesday">Tuesday</option>
</select>
</div>

<div>
 Name: <input type="text" name="textbox" id="textbox" value="" />
</div>

<div>
 <label> <input type="checkbox" id="CAtickets" value="10" checked />Child tickets: </label>
 How many: <input type="text" id="CA" value="0" size="3" />
 <br>
 <label> <input type="checkbox" id="SAtickets" value="20" checked />Adult tickets: </label>
 How many: <input type="text" id="SA" value="0" size="3" />
 <br>
 <label> <input type="checkbox" id="SPtickets" value="18" checked />Concession tickets: </label>
 How many: <input type="text" id="SP" value="0" size="3" />
 <br>
 <label> <input type="checkbox" id="FAtickets" value="30" checked />First Class Adult tickets: </label>
 How many: <input type="text" id="FA" value="0" size="3" />
 <br>
 <label> <input type="checkbox" id="FCtickets" value="20" checked />First Class Child tickets: </label>
 How many: <input type="text" id="FC" value="0" size="3" />
 <br>
 <label> <input type="checkbox" id="B1tickets" value="20" checked />Beanbag 1 Person tickets: </label>
 How many: <input type="text" id="B1" value="0" size="3" />
 <br>
 <label> <input type="checkbox" id="B2tickets" value="25" checked />Beanbag 2 person tickets: </label>
 How many: <input type="text" id="B2" value="0" size="3" />
 <br>
 <label> <input type="checkbox" id="B3tickets" value="30" checked />Beanbag 3 person tickets: </label>
 How many: <input type="text" id="B3" value="0" size="3" />
 <br>


 <p><input type="button" value="Purchase" onclick="printPrice()" />
</div>

</form>

<div id="inserts"> </div>

这是我的javascript：

function printPrice() {
  var movie = document.getElementById("movie").value;
  var day = document.getElementById("day").value;
  var name = document.getElementById("textbox").value;
  var CA = document.getElementById("CA").value * 1;
  var SA = document.getElementById("SP").value * 1;
  var SP = document.getElementById("SP").value * 1;
  var FA = document.getElementById("FA").value * 1;
  var FC = document.getElementById("FC").value * 1;
  var B1 = document.getElementById("B1").value * 1;
  var B2 = document.getElementById("B2").value * 1;
  var B3 = document.getElementById("B3").value * 1;
  var total = 0;
  var sentence = "";
  var price = document.getElementById('CAtickets').value * CA;

  sentence += name + "<br>purchased "+CA+" Child ticket(s) to \"";
   sentence += day +'<br>';
  sentence += movie + "\" for $";
  sentence += price;
  total += price;

  price = document.getElementById('SAtickets').value * SA;
  sentence += "<br>and "+SA+" Adult ticket(s) to \"";
  sentence += day +'<br>';
  sentence += movie + "\" for $";
  sentence += price +'<br>';
  total += price;

  price = document.getElementById('SPtickets').value * SP;
  sentence += "<br>and "+SP+" Concession ticket(s) to \"";
  sentence += day +'<br>';
  sentence += movie + "\" for $";
  sentence += price +'<br>';
  total += price;

  price = document.getElementById('FAtickets').value * FA;
  sentence += "<br>and "+FA+" First Class Adult ticket(s) to \"";
  sentence += day +'<br>';
  sentence += movie + "\" for $";
  sentence += price +'<br>';
  total += price;

price = document.getElementById('FCtickets').value * FC;
  sentence += "<br>and "+FC+" First Class Child ticket(s) to \"";
  sentence += day +'<br>';
  sentence += movie + "\" for $";
  sentence += price +'<br>';
  total += price;

price = document.getElementById('B1tickets').value * B1;
  sentence += "<br>and "+B1+" Beanbag 1 to \"";
  sentence += day +'<br>';
  sentence += movie + "\" for $";
  sentence += price +'<br>';
  total += price;

price = document.getElementById('B2tickets').value * B2;
  sentence += "<br>and "+B2+" Beanbag 2 to \"";
  sentence += day +'<br>';
  sentence += movie + "\" for $";
  sentence += price +'<br>';
  total += price;

  price = document.getElementById('B3tickets').value * B3;
  sentence += "<br>and "+B3+" Beanbag 3 to \"";
  sentence += day +'<br>';
  sentence += movie + "\" for $";
  sentence += price +'<br>';
  total += price;


  sentence += "<br>";
  sentence += 'Total cost: $'+total;
  document.getElementById("inserts").innerHTML=sentence;
}

Answer 1

更新回答：

好的，你需要稍微重新调整你的html，并在你的复选框中添加事件监听器来显示/隐藏与它们相关的内容。我创造了一个小提琴，我相信它会再现所需的行为：http://jsfiddle.net/tfx05wdd/

您正在向sentence字符串添加文本，无论是否选中该复选框。要检查是否选中了复选框，请使用以下命令：

document.getElementById('checkboxId').checked

在您的情况下，它可能看起来像这样：

if(document.getElementById('B3tickets').checked) {
    var price = document.getElementById('B3tickets').value * B3;
    sentence += "<br>and "+B3+" Beanbag 3 to \"";
    sentence += day +'<br>';
    sentence += movie + "\" for $";
    sentence += price +'<br>';
    total += price;
}

使用javascript从我的提交表单中删除未经检查和不需要的文本结果？

1 个答案: