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

インターネットの急速な発展に伴い、フロントエンド技術はますます注目を集めており、その中でも 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 サイトの他の関連記事を参照してください。