我有一个网站，我需要在格式化为表格的HTML表单中选中/取消选中几个框。我用PHP生成代码，这样我就可以根据需要更改元素的ID。目前，每个专栏标题都有一张英雄的照片。单击该图片后，我想取消选中该列中的所有框。我目前没有任何javascript/jquery在这个页面上运行，但我愿意嵌入任何需要的东西来获得所需的结果。此外，我还想增加检查/取消选中近战英雄或远程英雄的能力。
这是我的标题行与图像：
<tr>
<td class="tdleft">Team A</td>
<td><img id="1img" title="Adagio" src="images/heroes/adagio.png"></td>
<td><img width="50px" id="2img" title="Ardan" src="images/heroes/ardan.png"></td>
<td><img width="50px" id="3img" title="Catherine" src="images/heroes/catherine.png"></td>
<td><img width="50px" id="4img" title="Celeste" src="images/heroes/celeste.png"></td>
<td><img width="50px" id="5img" title="Glaive" src="images/heroes/glaive.png"></td>
<td><img width="50px" id="6img" title="Joule" src="images/heroes/joule.png"></td>
<td><img width="50px" id="7img" title="Koshka" src="images/heroes/koshka.png"></td>
<td><img width="50px" id="8img" title="Krul" src="images/heroes/krul.png"></td>
<td><img width="50px" id="9img" title="Petal" src="images/heroes/petal.png"></td>
<td><img width="50px" id="10img" title="Ringo" src="images/heroes/ringo.png"></td>
<td><img width="50px" id="11img" title="Saw" src="images/heroes/saw.png"></td>
<td><img width="50px" id="12img" title="Skaarf" src="images/heroes/skaarf.png"></td>
<td><img width="50px" id="13img" title="Taka" src="images/heroes/taka.png"></td>
<td><img width="50px" id="25img" title="Vox" src="images/heroes/vox.png"></td>
</tr>
这是第一行复选框：
<tr>
<td><input name="player[]" type="text" tabindex="2" placeholder="Player1" value=""></td>
<td><input id="1check" checked type="checkbox" name="p1[]" value="1"></td>
<td><input id="2check" checked type="checkbox" name="p1[]" value="2"></td>
<td><input id="3check" checked type="checkbox" name="p1[]" value="3"></td>
<td><input id="4check" checked type="checkbox" name="p1[]" value="4"></td>
<td><input id="5check" checked type="checkbox" name="p1[]" value="5"></td>
<td><input id="6check" checked type="checkbox" name="p1[]" value="6"></td>
<td><input id="7check" checked type="checkbox" name="p1[]" value="7"></td>
<td><input id="8check" checked type="checkbox" name="p1[]" value="8"></td>
<td><input id="9check" checked type="checkbox" name="p1[]" value="9"></td>
<td><input id="10check" checked type="checkbox" name="p1[]" value="10"></td>
<td><input id="11check" checked type="checkbox" name="p1[]" value="11"></td>
<td><input id="12check" checked type="checkbox" name="p1[]" value="12"></td>
<td><input id="13check" checked type="checkbox" name="p1[]" value="13"></td>
<td><input id="25check" checked type="checkbox" name="p1[]" value="25"></td>
</tr>
这是表格的完整代码：
https://jsfiddle.net/beeqeay9/
您不必为逻辑使用id。。如果你在上瘾后想用这个复选框做其他事情，你不能，因为id已经被用来做一些事情了。。
我更喜欢使用数据属性，如本例所示：https://jsfiddle.net/dk71qjz6/3/（只为第一个工作，我没有花时间为每一列复制/过去）
我在每个img标签上添加了data-img-id，在每个复选框上添加了一个data-ref-id。这个jQuery代码：
$(document).ready(function(){
// Image clicked
$('img').click(function(){
// Get ref id
var ref_id = $(this).attr('data-img-id');
// Uncheck all ref checkbox
$('input[data-ref-id=' + ref_id + ']').prop('checked', false);
});
});
首先，您需要知道ID必须是唯一的。您应该使用类作为复选框。这里有一种方法，不需要任何外部库：
// Grab your heroes
var heroes = document.querySelectorAll('table img');
// Attach a click event listener to each hero
for(var i=0, l=heroes.length; i<l; i++){
heroes[i].addEventListener('click', toggleHero);
}
function toggleHero(){
// Grab the index from the id
var index = parseInt( this.id, 10 );
// Get all checkboxes with a corresponding class
var checkboxes = document.getElementsByClassName(index + 'check');
// If there are none, exit the function
if(!checkboxes){ return false; }
// Get the state of the first one
var checked = checkboxes[0].checked;
// Set all the checkboxes to the opposite state
for(var i=0, l=checkboxes.length; i<l; i++){
checkboxes[i].checked = !checked;
}
}
JS Fiddle演示
jQuery版本（更短，但为什么要为此加载100kB的库？）
$('table img').click(function(){
var index = parseInt( this.id, 10 );
var checked = $('.' + index + 'check').eq(0).is(':checked');
$('.' + index + 'check').prop('checked', !checked);
});
JS Fiddle演示
可以使用索引
$('td img').click(function () {
var idx = $(this).parent().index();
$('tr').find('td:eq('+idx+') input').prop('checked', false);
});
DEMO