因此,我一直在尝试创建一种动态形式,以通过选择用户的类型来改变所提供的软件包的价值。我对表格部分的jsfiddle:
https://jsfiddle.net/mullern/ch8z0hry/4/
$(document).ready(function(){
$('#student').on('click', function() {
$('#minimal').val('100');
$('#soundonly').val('150');
$('#soundandlight').val('175');
$('#totalpartypackage').val('200');
});
$('#private').on('click', function() {
$('#minimal').val('150');
$('#soundonly').val('200');
$('#soundandlight').val('300');
$('#totalpartypackage').val('400');
});
$('#company').on('click', function() {
$('#minimal').val('200');
$('#soundonly').val('300');
$('#soundandlight').val('400');
$('#totalpartypackage').val('50');
});
});
我搜索了数小时尝试不同的解决方案。最后,我阅读了有关jQuery事件方法的W3Schools页面,并试图将看似对我的东西拼凑在一起。在JSFIDDLE中,我还包括一个脚本来检查RadioButtons的值。我注意到JSFIDDLE似乎有效,但在我自己的专用服务器上行不通。我在做什么错?
编辑:我目前正在使用网络网络运行该页面。
您在控制台中有错误JavaScript吗?您包括jQuery?
尝试插入以下内容:
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
我一直在摆弄代码,得出的结论是它实际上可以正常工作。您可以去查看我的JSFIDDLE,查看最终结果:
https://jsfiddle.net/mullern/no0qfqhh/
我开始使用的代码实际上已经正确。
$(document).ready(function(){
$('#student').on('click', function() {
$('#minimal').val('100');
$('#soundonly').val('150');
$('#soundandlight').val('175');
$('#totalpartypackage').val('200');
});
$('#private').on('click', function() {
$('#minimal').val('150');
$('#soundonly').val('200');
$('#soundandlight').val('300');
$('#totalpartypackage').val('400');
});
$('#company').on('click', function() {
$('#minimal').val('200');
$('#soundonly').val('300');
$('#soundandlight').val('400');
$('#totalpartypackage').val('50');
});
});
使用末端的按钮使检查代码非常简单,尤其是在添加更多值并显示其最终显示时进行的测试。
<div class="form-field-contain" id="customertype">
<fieldset data-role="controlgroup">
<label><input type="radio" name="customertype" id="student" value="Student/Apprentice">Stundent/Apprentice</label>
<label><input type="radio" name="customertype" id="private" value="private" checked="checked">Private</label>
<label><input type="radio" name="customertype" id="company" value="company">Company</label>
</fieldset>
</div>
<div class="form-field-contain" id="prices">
<fieldset data-role="controlgroup" id="pricetag">
<label><input type="radio" name="price" id="minimal" value checked="checked">Minimal</label>
<label><input type="radio" name="price" id="soundonly" value>Sound Only</label>
<label><input type="radio" name="price" id="soundandlight" value>Sound and Light</label>
<label><input type="radio" name="price" id="totalpartypackage" value>Total Party Package</label>
<label><input type="radio" name="price" id="custom" value="">Custom</label>
</fieldset>
</div>
<script>
function display() {
var a = document.getElementById('minimal').value;
var b = document.getElementById('soundonly').value;
var c = document.getElementById('soundandlight').value;
var d = document.getElementById('totalpartypackage').value;
alert("The value of the radio buttons are: " + a + " and " + b + " and " + c + " and " + d);
}
</script>
<button onclick="display()">Check</button>
感谢所有以任何方式做出贡献的人。