IE onClick не установит флажок, если вы не нажмете изображение в ярлыке - PullRequest
Новая
       11

IE onClick не установит флажок, если вы не нажмете изображение в ярлыке

3 голосов
/ 27 августа 2009

Хорошо, у меня есть метка, внутри этой метки есть div, который содержит изображение и некоторый текст. У div есть вызов onClick для функции javascript, которая меняет цвет div внутри метки, а также устанавливает флажок (по какой-то причине IE и firefox не захотели проверять это правильно, chrome работал нормально). Javascript: 

<script language="javascript" type="text/javascript">
   function changecolor(id, chck1, firstcolor, secondcolor)
                {

                    divid = document.getElementById(id);
  chkboxid = document.getElementById(chck1);
  if(chkboxid.checked){
                    divid.style.background= firstcolor;
   var ua = navigator.userAgent.toLowerCase();
   if (ua.indexOf('safari/') == -1){
    chkboxid.checked = false ;
   }
  }
  else{
  divid.style.background= secondcolor;
   var ua = navigator.userAgent.toLowerCase();
   if (ua.indexOf('safari/') == -1){
    chkboxid.checked = true ;
   }
  }
                }

HTML: 

<input type="checkbox" id="idbox" name="cboxwithlabel" value="Another check box"><label for="idbox"><div class="listing" onClick="changecolor('Test33', 'idbox', '#09C', '#0F0');" id="Test33">Another checkbox<img src="images/checkmark.png" height="80" width="80" /></div></label>

Хорошо, поэтому использование этого прекрасно работает в Firefox и Chrome, но в IE 7 (другие версии еще не тестировались), он будет только отмечать этот флажок, если щелкнуть изображение внутри div. Щелчок по самому элементу div изменяет только цвет фона. Так в чем же заключается исправление работы IE, чтобы при нажатии на div он также устанавливал флажок?

Ответы [ 2 ]

4 голосов
/ 27 августа 2009

Одной из приятных вещей, которые делают браузеры, является инициирование событий клика из <label> элементов для нас .

Поэтому я рекомендую прикрепить обработчик кликов к самому флажку. Таким образом, ваша функция становится НАМНОГО проще.

Также недопустимо помещать элементы уровня блока внутри элементов уровня строки, поэтому я изменил ваш <div> на <span> и использовал CSS, чтобы он отображался как элемент уровня блока. 

<html>
<head>

<script language="javascript" type="text/javascript">
  function changecolor( cbox, divId, firstcolor, secondcolor )
  {
    document.getElementById( divId ).style.background = cbox.checked ? firstcolor : secondcolor;
  }
</script>

<style type="text/css">
  span.listing {
    display: block;
  }
</style>

</head>
<body>

<input type="checkbox" id="idbox" name="cboxwithlabel" value="Another check box" onClick="changecolor(this, 'Test33', '#09C', '#0F0');">
<label for="idbox">
  <span class="listing" id="Test33">
    Another checkbox<img src="images/checkmark.png" height="80" width="80"  onclick="this.parentNode.click()" />
  </span>
</label>

</body>
</html>
1 голос
/ 27 августа 2009

В некоторых комментариях это предлагалось, но для устранения неполадок я бы поставил предупреждение перед установкой флажка. 

alert('test');
chkboxid.checked = true;

Я думаю, вы увидите, что предупреждение никогда не выполняется, и код, проверяющий браузер, ведет себя по-разному в IE и FF.

Если нет, вы, по крайней мере, сможете узнать, почему это не работает, переместив предупреждение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...