Как добавить другое свойство стиля к этому onClick?

Question

Я сделал это свойство onlick для своего флажка, мой 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

Вы можете сохранить его в атрибуте 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, чтобы получить обертку вокруг объекта, по которому щелкают, чтобы исключить необходимость в дополнительном идентификаторе.

Обратите внимание, что, поскольку это только обнаруживает щелчок, при повторном нажатии, чтобы снять флажок, интервал все равно останется выделенным.

Кроме того, не используйте 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, вы вообще не допустите изменения флажка. Таким образом, мы говорим браузеру перезвонить нам в тике, после того, как действие по умолчанию для флажка произошло. (Следовательно, мы должны сохранить значение this, которое будет затенено новым, бесполезным this в функции тайм-аута.)

onclick - действительно неправильное событие для использования здесь, оно должно быть onchange. Однако вместо этого вы обычно увидите onclick, потому что в IE есть ошибка, из-за которой он не запускает onchange, пока вы не снимите флажок.

Answer 2

Вы можете попробовать это:

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

Где вы определяете .newclass с новыми background-color и border

Или это

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

Или вы можете добавить css вручную, заменив эту часть на:

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

Есть много способов с jQuery

Answer 3

Я думаю, что вы хотите, чтобы фокус событий.

В IE вам понадобится JavaScript (например, прототип):

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

С Firefox (и другими) вы можете сделать это только с помощью css:

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