Question

我正在建立捐款表格。

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

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

我对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("");
        } 
    });
});

Fiddle

Answer 1

看着你的更新答案，我会按照以下方式进行：

$('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（例如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，因此它不会影响其他标签。

Answer 2

你可以做这样的事情，纯粹的javascript

<input type='checkbox' id='my-check' />
<input type='text' id='my-text' onfocus='uncheck()' />

<script>
    function uncheck() {
        document.getElementById('my-check').checked = false;
    }
</script>

如果单击文本框，如何自动取消选中复选框

2 个答案: