複選框圖像形式與jQuery

我想做一個複選框的形式，有鼠標懸停在圖像和檢查圖像功能與jQuery。複選框圖像形式與jQuery

我成功地完成了每個功能，但沒有一起工作。

這裏是我的html表單。

<label for="w_interest"> 
    <img src="/images/account/w_select.png_img"/ style='cursor:pointer;'> 
    <input name="w_interest" type="checkbox" id="w_interest" style="display:none"> 
</label>

這裏是jquery的

$(document).ready(function() { 
    $('#w_interest').hover(
    function() { 
     $('img', this).attr('src', '/images/account/w_select_hover.png'); 
    }, 
    function() { 
     $('img', this).attr('src', '/images/account/w_select.png'); 
    } 
); 

    $("#w_interest").change(function() { 
     if(this.checked) { 
      $(this).prev().attr("src", "/images/account/w_select_checked.png"); 
     } else { 
      $(this).prev().attr("src", "/images/account/w_select.png"); 
     } 
    }); 

});

當用戶在圖像上移動圖像上的鼠標指針，圖像變化到鼠標。
當他或她點擊圖像時，它會更改爲選中的圖像。（當然，它會檢查複選框）

你能幫我把這兩個功能結合起來嗎？

來源

2012-04-13 james

哪一部分不工作？你能提供一個鏈接或jsfiddle例子嗎？ – rgin 2012-04-13 06:47:32

懸停事件設置在隱藏的輸入字段上，因此它無法工作。

<input name="w_interest" type="checkbox" id="w_interest" style="display:none">

所以我認爲你想在圖像上的懸停效果？給圖像一個id並且將事件附加到圖像上。

事情是這樣的：而不是

來源

2012-04-13 06:50:48 JurgenStillaert

太棒了！這是我正在尋找的！謝謝！ – james 2012-04-13 07:03:53

這個工作正常！但是選中的圖片在選中後不會留下 – james 2012-04-13 07:10:31

你必須做一些編程，當然你希望它如何工作。您可以移除一次點擊的懸停動作，也可以懸停懸停的圖像。比我建議將它們放在變量或其他東西。點擊後，更改圖像變量。無論如何，你必須把邏輯放在代碼中:-) – JurgenStillaert 2012-04-13 07:21:02

：

if(this.checked)

寫：

if ($(this).is(':checked'))

來源

2012-04-13 06:57:23 undefined

複選框圖像形式與jQuery

回答

相關問題