JQuery: обнаружение изменения состояния CSS

Question

Ищу в следующем виде входа в систему образца:

logon form.

Обратите внимание, что в нижней части находится спрайт «Помните». По существу, скрытый флажок находится под изображением с 2 состояниями. При щелчке по изображению изменяется либо зеленая проверка, либо слайды на красный «х». При просмотре состояния DOM флажка значение не изменяется (по умолчанию значение = «1»). Если бы я использовал это, то какой JQuery я использовал бы для обнаружения изменения состояния изображения, чтобы я мог изменить значение флажка?

Вот форма HTML:

 <div id="logonForm"> 
      <div id="box"> 
       <div class="elements"> 
        <div class="avatar"></div> 
        <form action="" method="post"> 
         <input type="text"  id="un" name="username" class="username" placeholder="Username" /> 
         <input type="password" id="pw" name="password" class="password" placeholder="•••••••••" /> 
         <div class="checkbox"> 
          <!-- here is the CHECK-BOX that I need to change value with JQuery --> 
          <input id="check" name="checkbox" type="checkbox" value="1" /> 
          <label for="check">Remember?</label> 
         </div> 
         <div class="remember">Remember?</div> 
         <input type="button" id="login" name="submit" class="submit" value="Sign In" /> 
        </form> 
       </div> 
      </div> 

Вот CSS для формы флажка и этикеток (при условии, автор):

.checkbox { 
    display: block; 
    width: 40px; 
    height: 15px; 
    overflow: hidden; 
    border-radius: 5px; 
float:left; 
margin:5px 0 0 0;5 
} 
input[type=checkbox] { 
    display: none; 
} 
input[type=checkbox] + label { 
    text-indent: -9999px; 
    display: block; 
    width: 40px; 
    height: 15px; 
    line-height: 15px; 
    background: transparent url(../images/checkboxfield.png) no-repeat; 
    -webkit-transition: background-position 0.3s ease-in-out; 
    -moz-transition: background-position 0.3s ease-in-out; 
} 
input[type=checkbox]:checked + label { 
    -webkit-transition: background-position 0.3s ease-in-out; 
    -moz-transition: background-position 0.3s ease-in-out; 
    background-position:-26px; 
} 

Answer 1

Ожидается, что значение флажка останется 1 независимо от состояния проверки. В классической форме проверенное состояние определяет, передается ли значение, или нет, а не если в представлении содержится 1 или 0. То, что вы ищете, вероятно, является атрибутом «checked».

установка проверяется атрибут:

$('#check').attr('checked', true); 

получая «проверил» состояние:

$('#check').attr('checked'); // returns true/false 

от того, что я знаю нет простого способа проверки для изменения свойств, кроме проверки на интервалы в бесконечном цикле, но я уверен, что вам не нужно это делать. Нажав на метку, вы должны поменять флажок «checked». Если вам нужно 1 или 0 значение, а не «1 или ничего», вы можете прослушать событие «изменить» флажка и предотвратить де-проверку, но вместо этого изменить значение на 0, если оно равно 1 или наоборот.

$('#check').change(function(event){ 
    event.PreventDefault(); 
    $(this).val(($(this).val() + 1) % 2); 
}); 

Однако предотвращение изменения также аннулирует моделирование на основе проверенной собственности, так что вы должны обратиться к проверенному состоянию другому способа: либо в CSS с помощью

input[value=1] + label 

или вы могли бы добавить небольшой кусочек кода для переключения пользовательского класса

$('#check').change(function(event){ 
    event.PreventDefault(); 
    $(this).val(($(this).val() + 1) % 2); 
    $(this).toggleClass('checked'); 
}); 

и относятся к нему с помощью CSS, как это:

input.checked + label 

Answer 2

Изменение флажка значения никогда не показанный в dom. В зависимости от того, что вы делаете после отправки формы, вы можете просто проверить значение после отправки формы, например. с PHP $_POST['checkbox']

Если вы должны знать значение до того, как форма отправлена, вы можете сделать:

$('#checkbox').attr('checked'); 

Answer 3

Это может быть решение:

'use strict'; 
$(document).ready(function(){ 

    var buffer = $('#yourDiv').css('height'); 

    setInterval(function(){ 
     var height = $('#yourDiv').css('height'); 

     if (height != buffer) { 
      $('#yourDiv').html('The height changed from ' + height + ' to ' + buffer); 
      buffer = $('#yourDiv').css('height'); 
     } 
    }, 100); 

    $('#yourDiv').click(function(){ 
     $(this).css('height', (Math.random(1) * 501) + 'px'); 
    }); 
}); 

Проверить эту скрипку: http://jsfiddle.net/sma3y/7/

Что практически происходит здесь, я в основном называю anonymous listener;).

setInterval просто продолжает выполнять лямбда внутри него и на основе if -значения он что-то сделает или вообще ничего не сделает. Проблема здесь может заключаться в отсутствии «объекта по умолчанию» объекта данных события. Вы можете получить эти значения в основном вручную, если вы хотите (например, позиции мыши).

Удачи вам!