Wie Sie ein Kontrollkästchen automatisch deaktivieren, wenn das Textfeld angeklickt wird

Question

Ich baue ein Spendenformular.

Wenn ein Kontrollkästchen mit einem festen Betrag vom Benutzer aktiviert ist, möchte ich, dass es automatisch deaktiviert, wenn der Benutzer auf das Textfeld klickt, um einen benutzerdefinierten Betrag einzufügen.

Es wäre wichtig, dass das Textfeld auch löscht, wenn der Benutzer nach dem Einfügen eines benutzerdefinierten Betrags das Aktivieren eines Kontrollkästchens mit einem festen Betrag aktiviert hat.

Ich weiß nichts von JavaScript. Wird mir jemand dabei helfen?

<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]

Ich habe das fließende zusammen, die genau das tut, was ich brauche. Wenn jemand denkt, kann dies verbessert werden, würde ich es zu schätzen wissen:

$('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

Betrachten Sie aktualisiert sind antwort ich würde folgendes tun:

$('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 durch Entfernen dieses JavaScript-Code gestartet

$(document).ready(function() { 
    $(".checkbutton").change(function() { 
     if ($(this).not(":checked")) { 
      $('.textBox').val(""); 
     } 
    }); 
}); 

und ersetzt diesen Code mit:

$('input.checkbutton').on('change', function() { 
    $('input.checkbutton').not(this).prop('checked', false); 
    if ($("input.checkbutton-other").val()) { 
    $("input.checkbutton-other").val(""); 
    } 
}); 

Nach dem JavaScript ändern würde ich Ihre HTML (Codes wie € aktualisiert gefunden auf 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 

Nach dem HTML-Update waren einige CSS-Updates erforderlich. Ich würde das Polster aus dem Körper entfernen und hinzugefügt, um diese Klasse statt:

.form-group { 
    margin-top: 15px; 
} 

Diese Klasse zu einem div hinzugefügt werden würde, die Ihre Eingaben wickeln würden. Auch auf Ihrer schicken Checkbox css habe ich die Klasse .cb-label hinzugefügt, damit es keine anderen Labels beeinflusst.

Answer 2

Sie so etwas tun kann, reine 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>