Question

我为我的复选框创建了这个onclick属性，由js-fu就像，不存在，我怎么能简单地添加边框颜色属性以及bg颜色？

<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>

Answer 1

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

使用IE，你需要一些javascript（例如原型）：

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

使用Firefox（和其他人），你只能使用css：

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

Answer 2

您可以将其保留在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中无效。

re：评论：

但是，如果它没有被取消，我还能做些什么呢？

为了更容易处理还原，我会去上课：

<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。

Answer 3

你可以试试这个：

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

您使用新.newclass和background-color

定义border的位置

或者这个

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

或者您可以通过将$ this部分替换为：

来手动添加css

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

jQuery有很多方法

如何为此onClick添加另一个样式属性？

3 个答案: