Jquery 设置选中的复选框=！按关联图像单击时选择

以下是我的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>

但什么也没发生。以前的jQuery代码运行良好。语法中有错误吗？

请尝试以下方法：

$("checkbox[name^='cb$id']").attr("checked",
    !$("checkbox[name^='cb$id']").attr("checked"));

如果用作setter，则该值必须位于

attr（）

的第二个参数上

编辑

$("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"));
});

试一试

演示：

使用给定的html，我可以编写如下内容

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

演示：

但是如果您只想选择一个复选框

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

---

演示：

您应该将数据与标记分开，而不是像那样使用黑客；例如：

<div class="images">
  <img src="6.png" class="diceimg" data-index="1">
  <img src="2.png" class="diceimg" data-index="2">
  <img src="5.png" class="diceimg" data-index="3">
  <img src="1.png" class="diceimg" data-index="4">
  <img src="3.png" class="diceimg" data-index="5">
</div>

我使用的是

getElementById（）

，因为它比使用

queryselectoral（）

解析更快。您需要在表单本身中进行此更改：

<form method="post">                    
  <input type="checkbox" name="cb1" id="cb1" class="checkbox" value="6">
  <input type="checkbox" name="cb2" id="cb2" class="checkbox" value="2">
  <input type="checkbox" name="cb3" id="cb3" class="checkbox" value="5">
  <input type="checkbox" name="cb4" id="cb4" class="checkbox" value="1">
  <input type="checkbox" name="cb5" id="cb5" class="checkbox" value="3">
</form> 

---

@jstq您必须将

$this

更改为

$（this）

这是什么意思！选定的？您想取消选择它还是分配

的值！选中的属性<代码>已选中的属性<代码>按字面意思？！运算符与C#
$（“img[class^=diceimg]”）中的运算符相同。单击（函数（）{$id=$（this.attr（“class”）.charAt（$（this.attr）（）.length-1）；$state=$（“input[name='cb'+$id+'”]）.prop（“checked”）；$（“input[name='cb+$id+']”prop.prop（“checked”，！$state）；）这就是我想要的。你知道，对于一个超过30k的用户，我希望有一个比这个更好的答案=P尽管，最后一部分几乎是半体面的：）
<div class="images">
  <img src="6.png" class="diceimg" data-index="1">
  <img src="2.png" class="diceimg" data-index="2">
  <img src="5.png" class="diceimg" data-index="3">
  <img src="1.png" class="diceimg" data-index="4">
  <img src="3.png" class="diceimg" data-index="5">
</div>

$('.images').on('click', '.diceimg', function() {
    var index = $(this).data('index'),
    cb = document.getElementById('cb' + index);

    $('.checkbox')
      .prop('checked', false)
    cb.checked = true;
});

<form method="post">                    
  <input type="checkbox" name="cb1" id="cb1" class="checkbox" value="6">
  <input type="checkbox" name="cb2" id="cb2" class="checkbox" value="2">
  <input type="checkbox" name="cb3" id="cb3" class="checkbox" value="5">
  <input type="checkbox" name="cb4" id="cb4" class="checkbox" value="1">
  <input type="checkbox" name="cb5" id="cb5" class="checkbox" value="3">
</form>