Question

我是jquery的新手，但我熟悉php，perl，一个小JS并且一直试图找到答案。

我想使用jquery代替复选框来使用图像。我有一个工作示例，只适用于一个复选框。我已经根据我遇到过的例子尝试了很多变化但却无法使其发挥作用。

这是我目前为止只有一个复选框的工作代码。

CSS

.checked {border:solid 2px red}

HTML

<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" />
<input type="submit" value="Submit" />

jQuery代码

$(document).ready(function() {

    $('#blr').on('click', function(){
        var $$ = $(this)
        if( !$$.is('.checked')){
            $$.addClass('checked');
            $('#imgCheck').prop('checked', true);
        } else {
            $$.removeClass('checked');
            $('#imgCheck').prop('checked', false);
        }
    })
});

我知道有一个简单的解决方案，我通常很擅长拼凑代码并使其工作。因为我被卡住了我猜我不是在找正确的事。如果有人能告诉我，我会非常感激。

Answer 1

尝试以下代码

<强> HTML

<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr" class="blr" />
<input type="checkbox" class="imgCheck" 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="blr1" class="blr" />
<input type="checkbox" id="imgCheck1" class="imgCheck" name="imgCheck" value="barney" />
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr1" class="blr" />
<input type="checkbox" id="imgCheck2" name="imgCheck" class="imgCheck" value="barney" />
<input type="submit" value="Submit" />

<强> JQuery的

$(document).ready(function() {
    $('.blr').on('click', function(){
        var $$ = $(this)
        if( !$$.is('.checked')){
            $$.addClass('checked');
            $$.next(".imgCheck").prop('checked', true);
        } else {
            $$.removeClass('checked');
            $$.next(".imgCheck").prop('checked', false);
        }
    })
});

这将适用于多个复选框。

你必须在JQuery中使用类选择器，因为有多个元素，所以你不应该为每个元素使用相同的id。

希望这会对你有所帮助。

Answer 2

对多个复选框使用类选择器。例如，'。blr'而不是'#blr'，使用

$(document).on("click", ".blr", function(){
    var $$ = $(this)
    if( !$$.is('.checked')){
        $$.addClass('checked');
        $$.next("input[type='checkbox']").prop('checked', true);
    } else {
        $$.removeClass('checked');
        $$.next("input[type='checkbox']").prop('checked', false);
    }

})

因为$(document)将获取根文档中具有给定类名的所有复选框。因此，动态添加的复选框也可以获得事件的效果。

Answer 3

ID必须在页面上是唯一的，因此您无法使用ID作为事件或.ischecked。相反，请使用data-属性或class。

类经常用于样式/外观，但它也可用于表示功能。

此解决方案将img和input包装在包含div中，以便匹配相关的img / input对。这也允许你改变img /输入在html中的定位，而不依赖于.next这样的固定结构，这限制了你如何安排你的html（比使用包含div更多，这也限制了这个在一定程度上。）

HTML：

<div class="container">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" class="clickableimage" />
<input type="checkbox" value="harvey" style='display:none'/>
</div>

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

的jQuery

$('.clickableimage').on('click', function() {
    var $$ = $(this);
    if( !$$.is('.checked')){
        $$.addClass('checked');
        $$.closest(".container").find(":input").prop('checked', true);
    } else {
        $$.removeClass('checked');
        $$.closest(".container").find(":input").prop('checked', false);
    }
});

示例小提琴：live demo

jquery多个图像和复选框

3 个答案: