Флажки Javascript с <asp: checkbox />

Question

Сценарий checkbox JavaScript (by ryanfait) работал красиво, когда я использовал его вначале. Затем мне нужно было изменить форму, которую я сделал, чтобы asp.net мог обрабатывать форму, но теперь флажки по умолчанию.

Есть ли способ изменить скрипт, чтобы он работал на asp: checkbox? я называю функцию следующим образом:

$(document).ready(function() { 
    $('input[type=checkbox]').checkbox(); 
    }); 

И here является фактическим JavaScript.

У меня есть два разных типа флажков на моей странице в настоящий момент, один <asp:Checkbox ... /> и один <input type="checkbox" ... />. Второе оформлено, флажок asp не установлен ...

Я еще не связался с Райаном Файтом, так как я надеялся, что это обычная «ошибка».

EDIT: Как работает скрипт, он находит все элементы с классом = «стиль», скрывает его, а затем помещает пробел рядом с элементом. Как-то в моем исходном коде, для asp: checkbox это происходит слишком рано, я думаю. Смотри:

<input type="checkbox" class="styled" /><span class="styled"><input id="ctl00_contentPlaceHolderRightColumn_newsletter" type="checkbox" name="ctl00$contentPlaceHolderRightColumn$newsletter" /></span> 

Пролет там, видно, и все, что он не должен (я считаю, как первый флажок отображается в стиле Я хочу, чтобы это было, второй не делает).

До сих пор я нашел часть проблемы. Javascript не может изменить флажок asp как-то, но когда я вручную добавляю диапазон, который должен создать javascript, флажок больше не работает. Я добавил некоторые подробности в свой ответ ниже.

Answer 1

Получил это.

Забудьте о решении RyanFait, это работает на ВСЕХ флажках. : D

var boxes; 
var imgCheck = 'Images/checkbox-aangevinkt.png'; 
var imgUncheck = 'Images/checkbox.png'; 

function replaceChecks(){ 

    boxes = document.getElementsByTagName('input'); 
    for(var i=0; i < boxes.length; i++) { 
     if(boxes[i].getAttribute('type') == 'checkbox') { 
      var img = document.createElement('img'); 
      if(boxes[i].checked) { 
       img.src = imgCheck; 
      } else { 
       img.src = imgUncheck; 
      } 
      img.id = 'checkImage'+i; 
      img.onclick = new Function('checkChange('+i+')'); 
      boxes[i].parentNode.insertBefore(img, boxes[i]); 
      boxes[i].style.display='none'; 
     } 
    } 
} 
function checkChange(i) { 
    if(boxes[i].checked) { 
     boxes[i].checked = ''; 
     document.getElementById('checkImage'+i).src=imgUncheck; 
    } else { 
     boxes[i].checked = 'checked'; 
     document.getElementById('checkImage'+i).src=imgCheck; 
    } 
} 

Answer 2

Вам не нужно использовать атрибут 'type'. Работает ли для вас следующее?

$(document).ready(function() { 
    $('input:checkbox').....etc 
}); 

Answer 3

указан идентификатор на вашем флажком и затем ссылаться на него этим ID, например, так:

<asp:checkbox id="mycheck" /> 

Затем ссылаться на него, как это:

$('#mycheck').checkbox(); 

Если это не работает , сделайте то, что многие, многие веб-разработчики, прежде чем вы это сделали: загрузите Firefox, установите Firebug и проверьте свою логику выбора в консоли. Я считаю, что в Firefox всегда проще разрабатывать, даже когда моей целевой платформой является IE.

Answer 4

Я нашел часть ответа.

Когда я добавить пядь плагин создает вручную следующим образом:

я получаю красиво смотрит флажок под фактический флажок! Однако стилизованная коробка не является интерактивной. Он не меняется, когда я нажимаю на него или нависаю над ним, и он не регистрирует клик. Это скорее не флажок, а просто квадрат. Фактический флажок asp, отображающий , делает регистрационных кликов, но это уродливый стандартный.

<span class="checkbox" style="background-position: 0pt 0pt;"><asp:CheckBox ID="anId" runat="server" style="visibility: hidden;" /></span> 

Видимость: скрытая делает «реальный» флажок dissappear и оставляет хорошо выглядящий, но сломанный.

Answer 5

Я думаю, что ваша проблема может быть вызвана тем, что жерех: управления CheckBox автоматически обернутый в тег диапазона по умолчанию, и настройки атрибута CssClass на аспида: управление CheckBox фактически добавляет класс к тегу span (not the input).

Вы можете установить класс на входной метке, используя «InputAttributes» следующим образом:

chkMyCheckbox.InputAttributes.Add("class","styled"); 
... 
<asp:checkbox id="chkMyCheckbox" /> 

Это должно затем позволить Вам целевой флажок с существующим JavaScript.