Birden çok sütun üzerinde iki satır arasında 2 onay kutusu geçişi

Question

Bir tabloda 15 sütun ve 2 satır onay kutusu kullanmam gerekiyor. Kullanıcı tüm sütunlar için 'yüzey' veya 'sıfıra' seçebilir.

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

Ben mesela jquery kullanarak 'MESurfaceMount1' ve 'MEFlushMount1' arasında geçiş yapmak için nasıl anlıyoruz. 15 olay işleyicisini yazmak yerine, hepsini izlemek için tek bir olay işleyicisi kullanarak bunu yapmanın en kolay yolunun ne olduğunu merak ediyorum.

Teşekkür

GÜNCELLEME gereksinimi onay kutularını olmak zorunda

i ile elde şunlardır: Eğer demek istediğin

$(".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

her sütun için kullanıcı sadece bir tane seçtik ki Bu seçeneklerden ('floş' veya 'yüzey') sonra radyo düğmelerini kullanmalısınız; Ben sorunuza da tahmin kadarıyla

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

Answer 2

her sütundan monte tek yüzeyin floş seçmek istediğiniz şudur: Onlar yerleşik bu davranışı var. Radyo düğmeleri ile en iyi şekilde elde edilebilir. Aynı adı taşıyan radyo düğmeleri aynı gruba aittir ve bunlardan sadece birini seçebilirsiniz. Sanırım bu yardımcı olur.

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