Question

我在表格中显示我的产品数据库中的产品，并带有一个复选框，用于选择所需的产品。

每种产品都有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是Basic，1001-S是标准，1001-P是溢价。

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

我只想让他们为每个产品配对选择一个价格点/产品（即只有3个价格点中的一个）。

所以基本上让复选框像单选按钮一样工作。我不能使用单选按钮，因为我对复选框数组中的所有项使用相同的名称：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] []等变化的事实。我不能这样做。

有什么想法吗？

我已经解决了提交页面后的问题，所以我不想对我所拥有的复选框格式进行根本性的更改。

Answer 1

无论何时在页面中有重复模块，都可以通过遍历实例的主父并仅在该父实体内进行搜索来轻松隔离实例。

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);

Answer 2

让我们为每个组添加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);

});

仅为产品配对选择一个复选框x 3

2 个答案: