Установите флажок выбран = выбран, когда нажмите на попутном изображения

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. что я пробовал:

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

Demo: Fiddle

Но если вы хотите, чтобы только один флажок, чтобы выбрать

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

Демо: Fiddle

Answer 2

Попробуйте так:

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

Значение должно быть на втором параметре attr(), если он используется в качестве сеттера.

EDIT

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

Answer 3

Вы должны отделить данные от наценке вместо работы с писак вроде этого ; например:

<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