如何向此onclick添加其他样式属性?

你 可以 把它保存在 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 为了什么?嗯,当 点击 事件发生时,您刚刚单击了复选框,但尚未切换其选中状态。确实,如果你 return false 您将完全阻止更改复选框。因此,在复选框的默认操作发生后,我们告诉浏览器在tic中回拨我们。(因此,我们必须保留 这 会被一个新的,无用的 这 在超时函数中。)

点击 在这里使用的事件真的是错误的,应该是 onchange . 但是,您通常会看到 点击 用它代替是因为在IE里有一个不着火的虫子 换上 直到您取消复选框的焦点。

您可以尝试以下操作:

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

你定义的地方 .newclass 用新 background-color 和 border

或者这个

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

也可以手动添加CSS,方法是将$this部分替换为:

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

jquery有很多种方法

我想你想要的是焦点事件。

使用IE,您需要一些JavaScript(例如原型):

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

使用火狐(和其他浏览器),您只能使用CSS:

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