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 是高级款。

因此，客户通过选择每个项目旁边的复选框来选择他们想要的价格点选项。

我只想让他们为每个产品配对选择一个价格点/产品（即仅三个价格点之一）。

所以基本上让复选框像单选按钮一样工作。我不能使用单选按钮，因为我对复选框数组中的所有项目使用相同的名称：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); 
   }
});

使用这种通用遍历模式不需要了解复选框的任何属性。如果 checkbozes 没有包裹在标签中，则可以缩短为：

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

让我们为每个组添加类属性并处理它：

<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 回答