如何将其他样式属性添加到此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？

回答

相关问题