JS/JQuery - 使用複選框更改隨機元素的背景顏色

我有一個動態生成的照片庫使用ASP。每張照片都包含在一個<div>中，其中photoID爲ID和用於選擇該照片的複選框。例如：JS/JQuery - 使用複選框更改隨機元素的背景顏色

<div id="<%=rs("photoID")%>"> 
<img src="blah.jpg"><br> 
<input type="checkbox" id="checkbox_<%=rs("photoID")%>" onclick="selectPhoto(<%=rs("photoID")%>)"> 
</div>

我會再有一個JS的功能，其改變特定的DIV的背景顏色爲它選擇了表演，我只是做這件事，希望這是正確的：

function selectPhoto(id) 
{ 
if (document.getElementById('checkbox_'+id).checked == true) 
{ 
document.getElementById(id).style.backgroundColor = '#0066CC'; 
} 
if (document.getElementById('checkbox_'+id).checked == false) 
{ 
document.getElementById(id).style.backgroundColor = '#FFFFFF'; 
} 
}

所以，如果勾選了被點擊的複選框，然後將BG顏色更改爲突出顯示我的照片的內容。如果被點擊的複選框未被選中，則返回原始顏色。

這似乎很簡單，但我現在感到困惑的是，如果用戶點擊一個名爲'unselect_all'的'un-select'複選框，我可以將所有高亮顯示的照片變回白色」。

我在想，會收集所有以這樣的形式「gallery_form」檢查複選框，得到複選框的ID的一個功能，去掉「checkbox_」前綴，然後更改所有這些DIV ID的回到原來的白顏色。

或...我可以改變DIV有一個ID前綴，如'photo_ <％= rs（「photoID」）％>'，找到所有具有該前綴的DIV ID，然後更改背景顏色。

這是完成此操作的最佳方法嗎？如果是這樣，有沒有人有任何建議/片段讓我去？雖然我可以看到在我的頭上的功能，我的基本技能JS不要讓我寫這樣一個劇本，沒有一點幫助..

非常感謝

來源

2011-10-08 TheCarver

我會建議使用類，使您的生活更輕鬆。因此，每種顏色的將是一個CSS類即

.blue{ 
    background-color: #0066CC; 
} 

.white{ 
    background-color: #FFFFFF; 
} 

function selectPhoto(id){ 
    var checkbox = $('#checkbox_'+id); 
    var div = $('#'+id);   

    if(checkbox.is(':checked')) 
     div.addClass('blue'); 
    else 
     div.addClass('white'); 
}

那麼對於取消選擇所有

function unselectAll(){ 
    $('.blue').removeClass('blue').addClass('white'); // find all divs with class blue and add class white. 
}

來源

2011-10-08 16:51:03

假設你有沒有其他複選框的ID開始與「checkbox_」：

$('input[id^="checkbox_"]').removeAttr('checked');

來源

2011-10-08 16:49:16

JS/JQuery - 使用複選框更改隨機元素的背景顏色

回答

相關問題