jqueryでラジオ選択の加算、減算、削除を実装する方法-フロントエンドQ&A-php.cn

jqueryでラジオ選択の加算、減算、削除を実装する方法

WBOY

リリース： 2023-05-14 10:21:07

オリジナル

647 人が閲覧しました

インターネットの急速な発展に伴い、フロントエンド技術はますます注目を集めており、その中でも jquery はフロントエンドでよく使用される js ライブラリの 1 つです。ウェブサイトの開発では、製品選択に対して加算、減算、削除の操作が必要になることがよくありますが、この記事では、jqueryを使用して単一選択の加算、減算、削除を実装する方法を紹介します。

1. 単一選択操作

製品を選択するときは、通常、単一選択操作を実行する必要があります。つまり、複数のオプションの中から 1 つだけを選択できます。以下では、製品カテゴリを例として、jquery を使用して単一選択操作を実装する方法を示します。

まず、次のコードに示すように、フロントエンドページの input タグを通じて複数のラジオボタンを生成します。

<div class="category">
  <input type="radio" name="radio" value="1"/>电脑
  <input type="radio" name="radio" value="2"/>手机
  <input type="radio" name="radio" value="3"/>电视
</div>

ログイン後にコピー

上記のコードは 3 つのラジオボタンを生成します。その名前は次のとおりです。「ラジオ」、値はそれぞれ 1、2、3 です。この目的は、jquery を通じて選択された値を取得しやすくすることです。ラジオボタンに名前を付けないと、jquery は選択された値を取得できません。

次に、ラジオ選択操作を実装するための jquery コードを記述する必要があります:

$('.category input').click(function(){
  $('.category input').attr('checked',false);
  $(this).attr('checked',true);
})

ログイン後にコピー

上記のコードの機能は、ユーザーがボタンをクリックしたときにすべてのボタンの「チェック済み」属性を設定することです。ラジオボタンが false の場合、現在のボタンの「checked」属性を true に設定します。こうすることで、一度に 1 つのラジオボタンだけが選択されるようになります。

2. 加算と減算の演算

次に、jquery を使用して加算と減算の演算を実装する方法を紹介します。製品を選択する際、製品の数量を選択する必要がある場合があります。その場合は、追加ボタンと減算ボタンを使用してこれを行う必要があります。 jquery を使用して加算および減算演算を実装する方法を示すために、数量の選択を例に挙げてみましょう。

まず、フロントエンドページで数量選択用の HTML コードを生成します。

<div class="quantity">
  <button class="minus">-</button>
  <input type="text" name="quantity" value="1" class="number" disabled>
  <button class="plus">+</button>
</div>

ログイン後にコピー

上記のコードは、マイナスボタン、数量入力ボックス、およびプラスボタン。数量入力ボックスの初期値は 1 で無効になっているため、ユーザーはプラスボタンとマイナスボタンを使用してのみ数量を変更できます。さらに、各ボタンには jquery を介したバインドを容易にするクラス名が与えられます。

次に、加算と減算の演算を実装するための jquery コードを記述する必要があります。

$('.quantity .minus').click(function(){
  var num = parseInt($('.quantity .number').val());
  if(num > 1){
    $('.quantity .number').val(num - 1);
  }else{
    alert('数量不能小于1');
  }
})
$('.quantity .plus').click(function(){
  var num = parseInt($('.quantity .number').val());
  $('.quantity .number').val(num + 1);
})

ログイン後にコピー

上記のコードの機能は、ユーザーがクエリを実行したときに、jquery を通じて数量入力ボックスの現在の値を取得することです。マイナスボタンをクリックします。値が 1 より大きい場合は 1 つ減ります。値が 1 に等しい場合は、減り続けることができず、プロンプトメッセージがポップアップ表示されます。ユーザーがプラスボタンをクリックすると、数量入力ボックスの値が直接 1 増加します。これにより、単純な加算および減算関数が実現されます。

3. 削除操作

最後に、jquery を使用して削除操作を実装する方法を紹介します。製品の選択では、製品を削除する必要がある場合があります。その場合は、削除ボタンを使用する必要があります。 jquery を使用して削除操作を実装する方法を示すために、製品リストを例に挙げてみましょう。

まず、フロントエンドページで製品リストの HTML コードを生成します。

<ul>
  <li>
    <img src="goods1.jpg">
    <h2>商品1</h2>
    <p>价格：99元</p>
    <button class="delete">删除</button>
  </li>
  <li>
    <img src="goods2.jpg">
    <h2>商品2</h2>
    <p>价格：199元</p>
    <button class="delete">删除</button>
  </li>
  <li>
    <img src="goods3.jpg">
    <h2>商品3</h2>
    <p>价格：299元</p>
    <button class="delete">删除</button>
  </li>
</ul>

ログイン後にコピー

上記のコードは、製品リストを生成します。各製品には、製品写真、製品名、製品価格、および削除ボタン。削除ボタンには、jquery によるバインドを容易にするクラス名も付けられています。

次に、削除操作を実装するための jquery コードを記述する必要があります:

$('.delete').click(function(){
  $(this).parent('li').remove();
})

ログイン後にコピー

上記のコードの機能は、ユーザーがボタンをクリックしたときに、jquery を通じてボタンの親要素 li を取得することです。削除ボタンを押して削除します。これにより、商品リストの削除操作が実装されます。

結論

上記の 3 つのケースのデモンストレーションを通じて、ラジオの選択、加算、減算、削除などの一般的な操作が jquery を使用して簡単に実装できることがわかります。さらに、実際のアプリケーションでは、特定のニーズに応じてさらに改善および最適化できます。この記事が皆さんのお役に立てば幸いです。

以上がjqueryでラジオ選択の加算、減算、削除を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。