设置复选框选中=!按相关图像单击时选中

时间:2013-06-07 03:41:23

标签: 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>

我想要这个 - 当我点击某个类的图像以diceimg开头时,jQuery函数将其类的最后一个符号作为$id,得到name = cb+$id的复选框,然后设置它选中的属性为!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代码工作正常。语法中是否有错误?

3 个答案:

答案 0 :(得分:1)

以这种方式尝试:

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

如果将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"));
});

答案 1 :(得分: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

答案 2 :(得分:1)

你应该将数据与标记分开,而不是像这样的黑客攻击;例如:

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

最好不要滥用class属性来隐藏数据,而是引入一个包含相应复选框索引的data-x属性。这样做使点击处理程序变得更加简单:

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

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

我正在使用getElementById()因为它比使用querySelectorAll()更快解决问题。您需要在表单中进行此更改:

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

Demo