テキストボックスの入力時にラジオをチェック/アンチェック

私はこの小さなコードをここに持っています。私はしばらくの間作業していますが、何らかの理由でうまくいきません。誰かがそれを見て、何が間違っているか教えてもらえますか？テキストボックスの入力時にラジオをチェック/アンチェック

私が必要とするのは、誰かがテキストボックスに金額を入力したときに、「その他の金額」ラジオボックスをチェックすることだけです。私はまた、他のラジオがチェックされたときに書かれた金額をクリアしたいと思います。クロスブラウザは必須です。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Donation amount</title> 

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 

<script type="text/javascript"> 
    $("#donationAmountMan").on("input propertychange change paste keyup", function() { 
    if ($("#donationAmountMan").val().length > 0) { 
     $("#da_man").prop("checked", true); 
    } else { 
     $("#da_man").prop("checked", false); 
    } 
}); 
</script> 

</head> 
<body> 
    <label>Donation amount</label> 
    <div> 
     <label><input type='radio' name='donationAmount' id='da25' value='25' required /> $25</label> 
     <label><input type='radio' name='donationAmount' id='da50' value='50' required /> $50</label> 
     <label><input type='radio' name='donationAmount' id='da100' value='100' required /> $100</label> 
     <label><input type='radio' name='donationAmount' id='da150' value='150' required /> $150</label> 
     <label><input type='radio' name='donationAmount' id='da_man' value='0' required /> Other amount 
     <input type='text' name='donationAmountMan' id='donationAmountMan'>$</label> 
    </div> 
</body> 
</html>

大変ありがとうございました！

出典

2016-06-13 Gaétan Martin

[準備が整うのを待っていません]（https://learn.jquery.com/using-jquery-core/document-ready/） –

bodyタグの最後にscriptタグを置いてみてください。 – Neelesh

これを試して実行すると、コンソールには何が表示されますか？ – j08691

これはあなたのためにそれを行う必要があります。

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
     <title>Donation amount</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
    </head> 
    <body> 
      <label>Donation amount</label> 
      <div> 
       <form class="myForm"> 
        <label><input type='radio' name='donationAmount' id='da25' value='25' required /> $25</label> 
        <label><input type='radio' name='donationAmount' id='da50' value='50' required /> $50</label> 
        <label><input type='radio' name='donationAmount' id='da100' value='100' required /> $100</label> 
        <label><input type='radio' name='donationAmount' id='da150' value='150' required /> $150</label> 
        <label><input type='radio' name='donationAmount' id='da_man' value='0' required /> Other amount 
        <input type='text' name='donationAmountMan' id='donationAmountMan'>$</label> 
       </form> 
      </div> 

      <script type="text/javascript"> 

       $(document).ready(function(){ 
        $("#donationAmountMan").on("change", function() { 
         if ($("#donationAmountMan").val().length > 0) { 
          $("#da_man").prop("checked", true); 
         } 
        }); 
        $(".myForm input[type=radio]").on("click", function() { 
         if ($(this).val() != "0") { 
          $('#donationAmountMan').val(''); 
         } 
        }); 
       }); 

      </script> 

    </body> 
    </html>

私がやった：

は、ページのボディ
付属のjQueryの最後にスクリプトタグのJSコードを移動の代わりに、 jQuery UI
DOM対応ハンドラが追加されました
使用された適切なセレクタ

jQueryとjQueryのUIは異なるライブラリです。 jQuery UIは、特に、このページで使用していないUIウィジェットのセットを導入するためのものです。 jQuery UIは依存関係としてjQueryを使用します。したがって、を使用する場合は、を使用してください。事前にjQueryをロードする必要があります。しかし、それはあなたの例では必要ではありません。

JSコードをページのBODY要素の最後に移動しました。これはあなたのような非常に小さな例では問題ありません。私はそれが大規模で複雑な場合は特に、ほとんどのサイトにとっては本当に良い形ではないことに注意してください。その程度の良い議論がここにあります： https://stackoverflow.com/a/24070373/6441528

この場合、DOM-準備ハンドラ（$(document).ready）（私はそれを構造化された方法に基づいて）あなたが操作しているDOM要素が前にDOMにロードされていることを保証しますイベントハンドラを追加しようとするようなことをします。私の最初の答えは働いていたものの、それは実際にそれを処理するための最良の方法はありませんでしたので、

EDITは、私はこれを編集しました。ラジオはすべて同じセットに入っているので、それらをループする必要はありません。他のラジオを選択するだけで、明らかに他のラジオの選択が解除されます。私はまた、なぜ私がやったことをしたのか分かるように説明を追加したかったのです。

出典

2016-06-13 17:39:12 hightempo

jqueryコードを本文の末尾に移動するか、ドキュメントレディコールで折り返してください。

出典

2016-06-13 17:39:22

テキストボックスの入力時にラジオをチェック/アンチェック

答えて

関連する問題