Question

我有这个我仍在修改的代码。但我仍然很难过。我是jquery的新手。我打算用图片制作一个多重复选框。请检查我的代码。它不起作用。我的示例代码是两个复选框。我打算把它放在数组上，以便我可以将两个以上的复选框与图像放在一起。而不是在每个复选框中创建jquery代码。

这是我的代码

HTML

<form id="form1">
    <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr" class="" />
    <input type="checkbox" id="imgCheck[]" name="imgCheck" value="barney" />

    <img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr" class="" />
    <input type="checkbox" id="imgCheck[]" name="imgCheck" value="barney2" />

    <input type="submit" value="Submit" />
</form>

jquery的

$('img').on('click', function(){
        var $$ = $(this)
        if( !$$.is('.checked')){
            $$.addClass('checked');
            $('input[id=imgCheck]').prop('checked', true);
        } else {
            $$.removeClass('checked');
            $('input[id=imgCheck]').prop('checked', false);
        }
    })

式

.checked {border:solid 2px red}

Answer 1

尝试

$('img').on('click', function () {
    var $$ = $(this)
    //toggle the checked state
    $$.toggleClass('checked');
    //set the next checkbox's state in synch with the checked state of the image
    //from the given markup we can assume that an image will always be related to the next sibling element which will be checkbox
    $$.next('input').prop('checked', $$.hasClass('checked'));
})

演示：Fiddle

如何使用输入复选框检查特定图像

1 个答案: