jquery - 设置复选框选中 = !单击关联图像时选中

Question

这是我的 html 代码的一部分:

 <div class='images'>
<img src='6.png' class='diceimg1'>
<img src='2.png' class='diceimg2'>
<img src='5.png' class='diceimg3'>
<img src='1.png' class='diceimg4'>
<img src='3.png' class='diceimg5'>
</div>
                <form method="post">                    
                    <input type="checkbox" name="cb1" class="checkbox" value="6">
                    <input type="checkbox" name="cb2" class="checkbox" value="2">
                    <input type="checkbox" name="cb3" class="checkbox" value="5">
                    <input type="checkbox" name="cb4" class="checkbox" value="1">
                    <input type="checkbox" name="cb5" class="checkbox" value="3">

    <br />                  
    <br />                                  
    </form> 
    <p class="error"></p>

我想要这个 - 当我单击某个类以 diceimg 开头的图像时，jQuery 函数将其类的最后一个符号作为 $id，获取带有 的复选框>name = cb+$id，并将其selected属性设置为!selected。我尝试了什么:

$("img[class^=diceimg]").click(function () {
    $id = $this.attr("class").charAt($this.attr("class").length-1);
    $("checkbox[name^='cb$id']").attr("checked") = !$("checkbox[name^='cb$id']").attr("checked");
});

但是什么也没发生。以前的 jQuery 代码工作正常。语法有错误吗？

Answer 1

尝试

$("img[class^=diceimg]").click(function () {
    $id = $(this).attr("class").charAt($(this).attr("class").length-1);
    $("input[value='" + $id + "']").prop("checked", true)
});

演示:Fiddle

对于给定的html，我可以写成

$("img[class^=diceimg]").click(function () {
    var $this = $(this), index = $this.index();
    $(".checkbox").eq(index).prop("checked", true)
});

演示:Fiddle

但是如果您只想允许选中一个复选框

$("img[class^=diceimg]").click(function () {
    var $this = $(this), index = $this.index();
    $(".checkbox").prop('checked', false).eq(index).prop("checked", true)
});

演示:Fiddle