这是我的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代码工作正常。语法中是否存在一些错误?
尝试
$("img[class^=diceimg]").click(function () {
$id = $(this).attr("class").charAt($(this).attr("class").length-1);
$("input[value='" + $id + "']").prop("checked", true)
});
演示:小提琴
使用给定的 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>
与其滥用 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>
演示
试试这个方式:
$("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"));
});