首页 > 编程入门 文章详情

如果单击文本框，如何自动取消选中复选框(How to automatically uncheck a checkbox if the textbox is clicked)

编程入门 行业动态 更新时间:2024-10-24 17:28:41
如果单击文本框，如何自动取消选中复选框(How to automatically uncheck a checkbox if the textbox is clicked)

我正在建立捐款表格。

如果用户检查了具有固定金额的复选框，我希望自动取消选中用户是否接下来单击文本框以插入自定义金额。

如果在插入自定义金额后用户选择选中固定金额的复选框，则文本框也会清除。

我对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>&#x80;05.00</span>
    </label>
    <label for="cb10" class="cb-label">
      <input type="checkbox" name="amount" id="cb10" class="checkbutton" value="10.00">
      <span>&#x80;10.00</span>
    </label>
    <label for="cb15" class="cb-label">
      <input type="checkbox" name="amount" id="cb15" class="checkbutton" value="15.00">
      <span>&#x80;15.00</span>
    </label>
    <label for="cb20" class="cb-label">
      <input type="checkbox" name="amount" id="cb20" class="checkbutton" value="20.00">
      <span>&#x80;20.00</span>
    </label>
  </div>

  <div class="form-group">
    <label for="cbOther"><strong>Any Amount</strong> &#x24;</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（代码如&#x80;可在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>&#x80;05.00</span>
    </label>
    <label for="cb10" class="cb-label">
      <input type="checkbox" name="amount" id="cb10" class="checkbutton" value="10.00">
      <span>&#x80;10.00</span>
    </label>
    <label for="cb15" class="cb-label">
      <input type="checkbox" name="amount" id="cb15" class="checkbutton" value="15.00">
      <span>&#x80;15.00</span>
    </label>
    <label for="cb20" class="cb-label">
      <input type="checkbox" name="amount" id="cb20" class="checkbutton" value="20.00">
      <span>&#x80;20.00</span>
    </label>
  </div>

  <div class="form-group">
    <label for="cbOther"><strong>Any Amount</strong> &#x24;</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 &#x80; 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 too
 

After 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

本文发布于:2023-07-05 09:02:00，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1035509.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：单击   文本框   复选框   automatically   clicked

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表