JQuery Нажмите «Ребенок», когда родительский элемент нажал

Question

У меня длинный день ....

У меня есть этот код ниже

<div class="background" onclick="javascript:$('this checkbox').click();">
    <div class="picture"> 
       <img class="colors" src="458x395.png" />
    </div>
    <input type="checkbox" value="nothing" name="check" class="selsts" />
</div>
<div class="background" onclick="javascript:$('this checkbox').click();">
    <div class="picture"> 
       <img class="colors" src="asdfag3.png" />
    </div>
    <input type="checkbox" value="aff4t" name="check" class="selsts" />
</div>

И он должен установить флажок.Я не могу различить по имени, классу или идентификатору, я должен использовать тип.Мне также нужно убедиться, что это внутри родительского div и ничего больше.

Есть идеи, почему это не работает?Я уверен, что у меня просто глупый момент.: \

Спасибо

Answer 1

HTML

<div class="background">
    <div class="picture"> 
       <img class="colors" src="458x395.png" />
    </div>
    <input type="checkbox" value="nothing" name="check" class="selsts" />
</div>

Javascript

$('div.background').click(function() { 
  var checkBox = $(this).find('input:checkbox'); 
   checkBox.attr('checked', !checkBox.attr('checked'));
});

Answer 2

Поскольку вы используете jQuery, вам, вероятно, не следует использовать атрибут onclick для привязки вашего обработчика событий.

Основная проблема в том, что вы передаете строку в jQuery. Эта строка интерпретируется как селектор и будет искать элемент типа checkbox, который является потомком элемента типа this. Очевидно, этого не будет.

Вы хотите что-то похожее на это:

$("div.background").click(function() {
    $(this).find(":checkbox").click();
});

Или вы можете передать this в jQuery в качестве контекста (что эквивалентно использованию find):

$("div.background").click(function() {
    $(":checkbox", this).click();
});

Обратите внимание, что я использую :checkbox вместо просто checkbox (с :). Это селектор, который соответствует input элементам типа checkbox.

Тем не менее, есть большая проблема с этим. Вы застрянете в бесконечном цикле (поскольку события DOM всплывают на дереве). Вам нужно будет зафиксировать событие click на флажке и остановить его там.

Answer 3

<div class="background" style="border:1px solid black;" onclick="javascript:$(this).find(':checkbox').attr('checked',true);"> 
                    <div class="picture"> 
                    <img class="colors" src="458x395.png" />
                    </div>
                <input type="checkbox" value="nothing" name="check" class="selsts" />
            </div>

Answer 4

Тебе нужно вот так?

 $("input[type=checkbox]").click(function(){ alert('Checked');});​

http://jsfiddle.net/JF2xu/1/

Answer 5

onclick="$(this).find(':checkbox').attr('checked','checked')"

Answer 6

Вы передаете это как строку, а не как объект. Jquery не поймет масштаб этого. Подумайте о том, чтобы присоединить функцию за пределами html для разделения проблем

Попробуйте, это позволит пользователю установить / снять флажок и не будет распространять событие, создающее цикл.

<div class="background">
    <div class="picture">
       <img class="colors" src="458x395.png" />
    </div>
    <input type="checkbox" value="nothing" name="check" class="selsts" />
</div>

Javascript

 $(document).ready(function(){
    $(".background").click(function(e){
        var chk = $($(this).find("input[type='checkbox']"));
        if(chk.attr('checked'))
        {
            chk.attr('checked',false);
        }else{
            chk.attr('checked',true);
        }

       });
    });

Пример: http://jsfiddle.net/fycFB/

Answer 7

Ваш jQuery ищет тег this, которого не существует. Вы не должны вставлять свой JS. И .click() не проверяет DOM при добавлении новых элементов, поэтому попробуйте это:

<div class="background">
    <div class="picture"> 
        <img class="colors" src="458x395.png" />
    </div>
    <input type="checkbox" value="nothing" name="check" class="selsts" />
</div>​

затем, чтобы заставить его фактически проверить использование флажка (это jQuery 1.7):

$(".background").on("click",function(e) {
    var chk = $(this).find('input[type=checkbox]')[0];
    chk.checked = !chk.checked;
});​

это решение не сталкивается с проблемой всплытия DOM, которую описывает Джеймс