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多個圖像和複選框

回答

相關問題