我正在建立捐款表格。
如果用户检查了具有固定金额的复选框,我希望自动取消选中用户是否接下来单击文本框以插入自定义金额。
如果在插入自定义金额后用户选择选中固定金额的复选框,则文本框也会清除。
我对JavaScript一无所知。 有人会帮助我实现这个目标吗?
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="louzanimalespaypal@gmail.com"> <input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€05.00</span> <input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€10.00</span> <input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€15.00</span> <input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€20.00</span> <br> <strong>Other Amount</strong><br> $ <input type="text" class="TextBox" name="amount"> <input type="hidden" name="item_name" value="Donation"> <input type="hidden" name="item_number" value="Donation"> <input type="hidden" name="currency_code" value="EUR"> <input type="hidden" name="lc" value="PT"> <input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT"> <input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm"> <br /><br /> <input type="submit" value="Pay with PayPal!"> </form>[UPDATE]
我把流动的东西放在一起,完全符合我的需要。 如果有人认为这可以改善,我将不胜感激:
$('input.checkbutton').on('change', function() { $('input.checkbutton').not(this).prop('checked', false); }); $(".textBox").focus(function() { $(".checkbutton").prop("checked", false ); }); $(document).ready(function() { $(".checkbutton").change(function() { if ($(this).not(":checked")) { $('.textBox').val(""); } }); });小提琴
I'm building a donation form.
If a checkbox with a fixed amount is checked by the user, I would like it to automatically uncheck if next the user clicks the textbox to insert a custom amount.
It would be important that the textbox would also clear if after inserting a custom amount the user opted to check a checkbox with a fixed amount.
I know nothing of JavaScript. Will someone help me achieve this?
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="louzanimalespaypal@gmail.com"> <input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€05.00</span> <input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€10.00</span> <input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€15.00</span> <input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€20.00</span> <br> <strong>Other Amount</strong><br> $ <input type="text" class="TextBox" name="amount"> <input type="hidden" name="item_name" value="Donation"> <input type="hidden" name="item_number" value="Donation"> <input type="hidden" name="currency_code" value="EUR"> <input type="hidden" name="lc" value="PT"> <input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT"> <input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm"> <br /><br /> <input type="submit" value="Pay with PayPal!"> </form>[UPDATE]
I've put together the flowing which does exactly what I need. If anyone thinks this can be improved, I would appreciate it:
$('input.checkbutton').on('change', function() { $('input.checkbutton').not(this).prop('checked', false); }); $(".textBox").focus(function() { $(".checkbutton").prop("checked", false ); }); $(document).ready(function() { $(".checkbutton").change(function() { if ($(this).not(":checked")) { $('.textBox').val(""); } }); });Fiddle
最满意答案
看着你的更新答案我会做以下事情:
$('input.checkbutton').on('change', function() { $('input.checkbutton').not(this).prop('checked', false); if ($("input.checkbutton-other").val()) { $("input.checkbutton-other").val(""); } }); $("input.checkbutton-other").on("focus click", function() { $("input.checkbutton").prop("checked", false); });body { font-family: sans-serif; box-sizing: border-box; } .form-group { margin-top: 15px; } label.cb-label { margin: 5px; float: left; background: #ccc; } label.cb-label:hover { background: grey; color: #fff; } label.cb-label span { text-align: center; box-sizing: border-box; padding: 10px 15px; display: block; } label.cb-label input { position: absolute; visibility: hidden; } label.cb-label input:checked + span { background-color: black; color: #fff; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form action="#" method="post" target="_blank"> <div class="form-group" style="display: inline-block;"> <label for="cb5" class="cb-label"> <input type="checkbox" name="amount" id="cb5" class="checkbutton" value="5.00"> <span>€05.00</span> </label> <label for="cb10" class="cb-label"> <input type="checkbox" name="amount" id="cb10" class="checkbutton" value="10.00"> <span>€10.00</span> </label> <label for="cb15" class="cb-label"> <input type="checkbox" name="amount" id="cb15" class="checkbutton" value="15.00"> <span>€15.00</span> </label> <label for="cb20" class="cb-label"> <input type="checkbox" name="amount" id="cb20" class="checkbutton" value="20.00"> <span>€20.00</span> </label> </div> <div class="form-group"> <label for="cbOther"><strong>Any Amount</strong> $</label> <input type="number" name="amount" id="cbOther" class="checkbutton-other"> </div> <div class="form-group"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="test@email.com"> <input type="hidden" name="item_name" value="Donation"> <input type="hidden" name="item_number" value="Donation"> <input type="hidden" name="currency_code" value="EUR"> <input type="hidden" name="lc" value="PT"> <input type="hidden" name="bn" value="WPS_PT"> <input type="hidden" name="return" value="#"> </div> <div class="form-group"> <input type="submit" value="Pay with PayPal!"> </div> </form>我开始删除此JavaScript代码
$(document).ready(function() { $(".checkbutton").change(function() { if ($(this).not(":checked")) { $('.textBox').val(""); } }); });并用以下代码替换此代码:
$('input.checkbutton').on('change', function() { $('input.checkbutton').not(this).prop('checked', false); if ($("input.checkbutton-other").val()) { $("input.checkbutton-other").val(""); } });更改JavaScript后,我会更新您的HTML(代码如€可在Character-Code.com上找到):
<div class="form-group" style="display: inline-block;"></div> // this html around the check boxes so their float don't affect other elements of page <label for="cb5" class="cb-label"> // add `for` to the labels which can be tied to a `id` of the input it is related too and added a `class` for the css to be attached too在HTML更新之后,他们需要一些CSS更新。 我将从主体中删除填充并添加此类:
.form-group { margin-top: 15px; }这个类将被添加到div ,它将包装你的输入。 同样在你喜欢的复选框css我添加了类.cb-label所以它不会影响其他标签。
Looking at you're updated answer I would do the follow:
$('input.checkbutton').on('change', function() { $('input.checkbutton').not(this).prop('checked', false); if ($("input.checkbutton-other").val()) { $("input.checkbutton-other").val(""); } }); $("input.checkbutton-other").on("focus click", function() { $("input.checkbutton").prop("checked", false); });body { font-family: sans-serif; box-sizing: border-box; } .form-group { margin-top: 15px; } label.cb-label { margin: 5px; float: left; background: #ccc; } label.cb-label:hover { background: grey; color: #fff; } label.cb-label span { text-align: center; box-sizing: border-box; padding: 10px 15px; display: block; } label.cb-label input { position: absolute; visibility: hidden; } label.cb-label input:checked + span { background-color: black; color: #fff; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form action="#" method="post" target="_blank"> <div class="form-group" style="display: inline-block;"> <label for="cb5" class="cb-label"> <input type="checkbox" name="amount" id="cb5" class="checkbutton" value="5.00"> <span>€05.00</span> </label> <label for="cb10" class="cb-label"> <input type="checkbox" name="amount" id="cb10" class="checkbutton" value="10.00"> <span>€10.00</span> </label> <label for="cb15" class="cb-label"> <input type="checkbox" name="amount" id="cb15" class="checkbutton" value="15.00"> <span>€15.00</span> </label> <label for="cb20" class="cb-label"> <input type="checkbox" name="amount" id="cb20" class="checkbutton" value="20.00"> <span>€20.00</span> </label> </div> <div class="form-group"> <label for="cbOther"><strong>Any Amount</strong> $</label> <input type="number" name="amount" id="cbOther" class="checkbutton-other"> </div> <div class="form-group"> <input type="hidden" name="cmd" value="_donations"> <input type="hidden" name="business" value="test@email.com"> <input type="hidden" name="item_name" value="Donation"> <input type="hidden" name="item_number" value="Donation"> <input type="hidden" name="currency_code" value="EUR"> <input type="hidden" name="lc" value="PT"> <input type="hidden" name="bn" value="WPS_PT"> <input type="hidden" name="return" value="#"> </div> <div class="form-group"> <input type="submit" value="Pay with PayPal!"> </div> </form>I started by removing this JavaScript code
$(document).ready(function() { $(".checkbutton").change(function() { if ($(this).not(":checked")) { $('.textBox').val(""); } }); });And replacing this code with:
$('input.checkbutton').on('change', function() { $('input.checkbutton').not(this).prop('checked', false); if ($("input.checkbutton-other").val()) { $("input.checkbutton-other").val(""); } });After changing the JavaScript I would update your HTML (codes like € are found on Character-Code.com):
<div class="form-group" style="display: inline-block;"></div> // this html around the check boxes so their float don't affect other elements of page <label for="cb5" class="cb-label"> // add `for` to the labels which can be tied to a `id` of the input it is related too and added a `class` for the css to be attached tooAfter the HTML update their was some CSS updates required. I'd remove the padding from the body and added this class instead:
.form-group { margin-top: 15px; }This class would be added to a div which would wrap your inputs. Also on your fancy checkbox css I added the class .cb-label so it won't effect other labels.
更多推荐
<input,type,value,电脑培训,计算机培训,IT培训"/> <meta name="descript
发布评论