Question

我必须在一个表中增加15列和两行复选框。用户可以为所有列选择“表面”或“刷新”。

 <tr class="MESurfaceMountRow">
     <td>Surface Mount</td>
     <td><input type="checkbox" value="" name="" id="MESurfaceMount1"></td>
     <td><input type="checkbox" value="" name="" id="MESurfaceMount2"></td>
     <td><input type="checkbox" value="" name="" id="MESurfaceMount3"></td>
     <td><input type="checkbox" value="" name="" id="MESurfaceMount4"></td>
     <td><input type="checkbox" value="" name="" id="MESurfaceMount5"></td>
 </tr>
 <tr class="MEFlushMountRow">
      <td>Flush Mount</td>
      <td><input type="checkbox" value="" name="" id="MEFlushMount1"></td>
      <td><input type="checkbox" value="" name="" id="MEFlushMount2"></td>
      <td><input type="checkbox" value="" name="" id="MEFlushMount3"></td>
      <td><input type="checkbox" value="" name="" id="MEFlushMount4"></td>
      <td><input type="checkbox" value="" name="" id="MEFlushMount5"></td>
 </tr>

我理解如何使用jquery在'MESurfaceMount1'和'MEFlushMount1'之间切换。我想知道最简单的方法是使用单个事件处理程序监视所有内容，而不是编写15个事件处理程序。

由于

更新

要求必须是复选框，我用以下方法实现：

$(".MESurfaceMountRow :checkbox").change(function (e) {

var idOfCheckbox = e.target.id;
idOfCheckbox = idOfCheckbox.replace(/\D/g, '');
var flushCheckBoxID = "#MEFlushMount" + idOfCheckbox;

if ($(this).is(":checked")) {
   $(flushCheckBoxID).prop('checked', false);
}

});

$(".MEFlushMountRow :checkbox").change(function (e) {

var idOfCheckbox = e.target.id;
idOfCheckbox = idOfCheckbox.replace(/\D/g, '');
var surfaceCheckBoxID = "#MESurfaceMount" + idOfCheckbox;

if ($(this).is(":checked")) {
    $(surfaceCheckBoxID).prop('checked', false);
}

});

Answer 1

如果您的意思是每个列，用户只能选择其中一个选项（＆＃39; flush＆＃39;或＆＃39; surface＆＃39;），那么您应该使用单选按钮;他们有这种行为：

＆＃13;

<table>
    <tr class="MESurfaceMountRow">
        <td>Surface Mount</td>
        <td><input type="radio" value="" name="MEMount1" /></td>
        <td><input type="radio" value="" name="MEMount2" /></td>
        <td><input type="radio" value="" name="MEMount3" /></td>
        <td><input type="radio" value="" name="MEMount4" /></td>
        <td><input type="radio" value="" name="MEMount5" /></td>
    </tr>
    <tr class="MEFlushMountRow">
        <td>Flush Mount</td>
        <td><input type="radio" value="" name="MEMount1" /></td>
        <td><input type="radio" value="" name="MEMount2" /></td>
        <td><input type="radio" value="" name="MEMount3" /></td>
        <td><input type="radio" value="" name="MEMount4" /></td>
        <td><input type="radio" value="" name="MEMount5" /></td>
    </tr>
</table>

＆＃13;

Answer 2

我可以从您的问题中猜到，您只想从每列中选择一个表面贴装齐平。最好用单选按钮来实现。具有相同名称的单选按钮属于同一组，您只能选择其中一个。我想这有帮助。

＆＃13;

<tr class="MESurfaceMountRow">
             <td>Surface Mount</td>
             <td><input type="radio" value="" name="MEMountRow1" id="MESurfaceMount1"></td>
             <td><input type="radio" value="" name="MEMountRow2" id="MESurfaceMount2"></td>
             <td><input type="radio" value="" name="MEMountRow3" id="MESurfaceMount3"></td>
             <td><input type="radio" value="" name="MEMountRow4" id="MESurfaceMount4"></td>
             <td><input type="radio" value="" name="MEMountRow5" id="MESurfaceMount5"></td>
         </tr>
         <tr class="MEFlushMountRow">
              <td>Flush Mount</td>
              <td><input type="radio" value="" name="MEMountRow1" id="MEFlushMount1"></td>
              <td><input type="radio" value="" name="MEMountRow2" id="MEFlushMount2"></td>
              <td><input type="radio" value="" name="MEMountRow3" id="MEFlushMount3"></td>
              <td><input type="radio" value="" name="MEMountRow4" id="MEFlushMount4"></td>
              <td><input type="radio" value="" name="MEMountRow5" id="MEFlushMount5"></td>
         </tr>

＆＃13;

在多列上的两行之间切换2个复选框

2 个答案: