jquery多个图像和复选框

我是jquery的新手，但我熟悉php，perl，一个小小的JS，并一直试图找到答案。jquery多个图像和复选框

我想使用图像来代替使用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代码

我知道有一个简单的解决方案，我通常是在拼凑代码，并使其相当不错工作。由于我卡住了，我猜测我不是在寻找正确的东西。如果有人能让我知道我会很感激。

来源

2016-03-07 user2490339

什么是你的代码看，当你有多个相似图片？例如，是否有一个包含div？你有不同的'身份证'吗？（记住每个'id'在页面上应该是唯一的） –

试试下面的代码

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。

希望这会帮助你。

来源

2016-03-07 12:08:25

使用类选择多个检查boxes.eg，而不是'#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)将获取与给定的类名称的所有复选框的根文件。所以动态添加复选框也会得到事件的效果。

来源

2016-03-07 12:09:24

尽管有用，但问题不在于事件代表，而是具有性能意义。 '.blr'，但仍然是'＃imgCheck'？ –

ID在页面上必须是唯一的，所以你不能使用ID作为事件或.ischecked。相反，请使用data-属性或class。

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

该解决方案将img和input包含在包含div中，以便可以匹配相关的img/input对。这也允许你改变img/inputs在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); 
    } 
});

例小提琴：https://jsfiddle.net/n98xg57w/

来源

2016-03-07 12:13:55

jquery多个图像和复选框

回答

相关问题