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

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 的结构，并将事件侦听器添加到您的复选框以 show/hide 与它们相关的内容。我创建了一个 fiddle，我相信它会重现所需的行为：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 从我的提交表单中删除未选中和不需要的文本结果？

Remove Unchecked and Unwanted text results from my submission form with javascript?

html

javascript

checkbox