0

製品データベースの製品をテーブルに表示しており、目的の製品を選択するためのチェックボックスがあります。

各製品には 3 つのバリエーションまたは価格オプションがあり、価格バリエーションごとに個別の項目としてデータベースに入力されます。

Code    category Description            Points                Choose your Points
1001-B  Logo    artwork supplied    Basic                 4.00 points
1001-S  Logo    artwork supplied    Standard          6.00 points
1001-P  Logo    artwork supplied    Premium               12.00 points
1002-B  Logo    re-draw to vector   Basic                 6.00 points
1002-S  Logo    re-draw to vector   Standard          8.00 points
1002-P  Logo    re-draw to vector   Premium              14.00 points

各製品には、ベーシック、スタンダード、プレミアムの 3 つの価格バリエーションがあります。各「製品」には同じ製品コードがあります。上記の製品のように、1001-B がベーシック、1001-S がスタンダード、1001-P がプレミアムです。

したがって、顧客は、各項目の横にあるチェックボックスを選択して、希望する価格オプションを選択します。

製品の組み合わせごとに 1 つの価格ポイント/製品のみを選択できるようにしたいと考えています (つまり、3 つの価格ポイントのうちの 1 つだけ)。

つまり、基本的にチェックボックスをラジオボタンのように機能させることです。チェックボックス配列内のすべてのアイテムに同じ名前を使用しているため、ラジオボタンを使用できません: name="id[]"

echo '<input type="checkbox" name="id[]" value="' . $id . '" /></td>';

どうすればこれを達成できますか？

私は次のことができることを知っています：

<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<p>&nbsp;</p>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />


$("input:checkbox").click(function() {
    if ($(this).attr("checked") === true) {
        var group = "input:checkbox[name='" + $(this).attr("name") + "']";
        $(group).attr("checked", false);
        $(this).attr("checked", true);
    } else {
        $(this).attr("checked", false);
    }
});

しかし、これは name="fooby[1][] name="fooby[2][] などの変更に依存しています。私の場合はそれができません。

何か案は？

ページが送信された後、これのカートの側面が解決されたため、チェックボックスの形式を根本的に変更したくありません。

4

2 に答える 2

2

ページ内に繰り返しモジュールがある場合はいつでも、インスタンスのメインの親までトラバースし、その親内のみを検索することで、インスタンスを簡単に分離できます。

HTML

<div class="product">
   <div class="name"/>
  <div class="description/>
  <div class="choices">
       <input type="checkbox"/>
   </div>   
</div>

JS:

$('.product input:checkbox').change(function(){
   if(this.checked){
      $(this).closest('.choices').find('input:checkbox').not(this).prop('checked',false); 
   }
});

この一般的なトラバース パターンを使用する場合、チェックボックスのプロパティに関する知識は必要ありません。チェックボックスがラベルで包まれていない場合は、次のように短縮できます。

 $(this).siblings().prop('checked',false);
于 2013-03-14T10:31:46.787 に答える
1

各グループに class 属性を追加して処理しましょう:

<input type="checkbox" value="1B" name="id[]" class="group1" />
<input type="checkbox" value="1S" name="id[]" class="group1" />
<input type="checkbox" value="1P" name="id[]" class="group1" />
<p>&nbsp;</p>
<input type="checkbox" value="2B" name="id[]" class="group2" />
<input type="checkbox" value="2S" name="id[]" class="group2" />
<input type="checkbox" value="2P" name="id[]" class="group2" />

$("input:checkbox").click(function() {

    $('input:checkbox[class="' + $(this).attr('class') + '"]').prop('checked', false);
    $(this).prop('checked', true);

});
于 2013-03-14T10:17:28.200 に答える