如何將其他樣式屬性添加到此onClick？

我做了這個onlick屬性爲我的複選框，我的js-fu就像，不在那裏，我如何簡單地添加邊框顏色屬性以及bg顏色？如何將其他樣式屬性添加到此onClick？

<div id="akseptwrap">  
    <span style="left:-20px; position:relative; top:3px;"><img src="http://euroworker.no/public/upload/1_2_arrow.gif"></span> 
    <span id="salgsaksept"> 
     <input tabindex=12 value="1" type="checkbox" name="salgsvilkar" ID="Checkbox2" onclick="document.getElementById('salgsaksept').style.backgroundColor='#E5F7C7';" />&nbsp;Salgs- og leveringsvilkår er lest og akseptert 
    </span> 
</div>

來源

2010-04-20 Kyle

您可以保持在onclick屬性中，但它通常更易於管理分解成單獨的腳本：

<span> 
    <input type="checkbox" tabindex="12" value="1" name="salgsvilkar" id="Checkbox2"/> 
    <label for="Checkbox2">Salgs- og leveringsvilkår er lest og akseptert</label> 
</span> 

<script type="text/javascript"> 
    document.getElementById('Checkbox2').onclick= function() { 
     var s= this.parentNode.style; 
     s.backgroundColor='#E5F7C7'; 
     s.border='solid blue 1px;'; 
    }; 
</script>

我使用this.parentNode來獲取圍繞被點擊的對象的包裝範圍，以消除對額外ID的需要。

請注意，由於這隻能檢測點擊，所以如果再次單擊以取消選中該複選框，則範圍仍將保持突出顯示。

此外，除非您實際上正在編寫XHTML文檔，否則不要使用XHTML />自閉格式。未引用的屬性值（如tabindex=12）在XHTML中無效。

回覆：發表評論：

但進一步的，我能做些什麼來恢復它，如果它未點擊？

爲了便於處理回覆，我會去班：

<style type="text/css"> 
    .highlight { 
     background: #E5F7C7; 
     border: solid blue 1px; 
    } 
</style> 

...same markup... 

<script type="text/javascript"> 
    document.getElementById('Checkbox2').onclick= function() { 
     var that= this; 
     setTimeout(function() { 
      that.parentNode.className= that.checked? 'highlight' : ''; 
     }, 0); 
    }; 
</script>

只刪除類時this不是checked將風格重置爲它以前，而不必記住舊的背景和邊界值。

什麼是setTimeout？那麼，當onclick事件發生時，您剛剛單擊了該複選框，但它尚未切換其檢查。事實上，如果你return false你會防止複選框被改變。因此，我們告訴瀏覽器在點擊複選框的默認操作發生後，回到tic中。（因此，我們必須保持的this值，它會通過一個新的，無用的this在超時功能被隱藏。）

onclick是真的錯了事件在這裏使用，它應該是onchange。但是，您通常會看到onclick，因爲在IE中存在一個錯誤，在該位置它不會觸發onchange，直到您將該複選框放開。

來源

2010-04-20 09:52:40 bobince

謝謝，我使用的是xhtml，從之前的一個項目中複製了一些以前的複選框代碼。將刪除它。它是一個接受條款框，因此只需點擊一次即可。但進一步說，如果它沒有點擊，我可以做些什麼來恢復它？ – Kyle 2010-04-20 09:53:54

在函數中添加如果（this.checked）{ /*設置樣式* /} 其他{ /*刪除樣式* /} – RoToRa 2010-04-20 10:22:29

這是一個驚人的完整的答案，即使我不支持JS心靈的理解，非常感謝你！ – Kyle 2010-04-20 12:03:35

我想你想要的是關注事件。

與IE瀏覽器，你將需要一些JavaScript（如原型）：

document.observe('focusin',function(e){/*set colors here */});

與Firefox（及其他），你可以只用CSS做：

#Checkbox2:focus { 
    /* set colors here */ 
}

來源

2010-04-20 09:47:03

注意IE中<= 8不支持addEventListener。 – bobince 2010-04-20 09:54:11

@bobince true，我們可以使用'document.observe（'focusin'，function（）{}）;'。 +1表示：P – 2010-04-20 12:27:16

你可以試試這個：

$('input[type=checkbox]').click(function(){ 
$(this).attr("class","newclass"); 
});

，可以手動用替換$這部分新background-color和border

或者這

$('input[type=checkbox][checked]').click(function(){ 
$(this).addClass("newclass"); 
});

也可以添加CSS定義.newclass ：

$(this).css("background-color", "#000"); 
$(this).css("border", "1px solid #000");

jQuery有很多種方法

來源

2010-04-20 09:55:05 ant

如何將其他樣式屬性添加到此onClick？

回答

相關問題