クリックした内容に応じてテキストボックスを変更します

Question

私はウェブサイトを維持するためにwordpressを使用しています。私はいくつかのアイコンと下部にテキストボックスを持つページを作成したいと思います。クリックされたアイコンに応じて、下のボックスのテキストが変わります。誰もが基本的なHTMLやCSSを使用してこれを行う方法を知っていますか？

Answer 1

これは、隠しチェックボックスで可能です。そしてちょっとハックする。 CSS兄弟セレクタを使用します。これにより、チェックボックスの兄弟である要素のスタイルが変更されます。チェックボックスgetが疑似クラスの場合：チェックされたテキストが変更されます。

これを試してみてください：

は

<input type="checkbox"> 
<p class="to-be-changed">Some Text.</p> 

    .to-be-changed { 
    color: black; 
} 

input[type=checkbox]:checked ~ .to-be-changed { 
    color: red; 
} 

Answer 2

それは、カスタムスクリプト

$('#two').click(function(){ 
 
    $('#count').val('2'); 
 
    $('#total').text('Product price: $1000'); 
 
}); 
 

 
$('#four').click(function(){ 
 
    $('#count').val('4'); 
 
    $('#total').text('Product price: $2000'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="button" id ='two' onclick="change()" value="2&#x00A;Qty"> 
 
<input type="button" id ='four' class="mnozstvi_sleva" value="4&#x00A;Qty"> 
 
<br> 
 
Total <input type="text" id="count" value="">