Question

我有一个网站，我需要检查/取消选中以表格格式化的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/

Answer 1

你不必使用id作为逻辑..如果你想在成瘾之后用这个复选框做其他事情你就不能因为id已被用于某事......

我首选使用数据属性，例如：https://jsfiddle.net/dk71qjz6/3/（仅适用于第一个，我没有时间复制/过去每个列）

我在每个data-img-id代码上添加了img，并在每个复选框上添加了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);
    });
});

Answer 2

可以使用索引

$('td img').click(function () {
    var idx = $(this).parent().index();
    $('tr').find('td:eq('+idx+') input').prop('checked', false);
});

的 DEMO

Answer 3

首先，您需要知道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 Demo

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

使用JavaScript / jQuery单击图像检查多个框

3 个答案:

JS Fiddle Demo

JS Fiddle Demo