Блог

У меня есть горизонтальный флажок jQuery. Он должен отображать некоторый текст при нажатии на него и удалять текст при повторном нажатии и снятии флажка. Однако, когда я впервые загружаю страницу и нажимаю на поле, ничего не происходит. Затем, когда я нажимаю на нее еще раз, чтобы снять флажок, появляется текст. Похоже, происходит поведение, противоположное тому, чего я ожидаю. Вот код: (Я могу решить эту проблему, просто перевернув логический знак, но я хочу понять, почему это происходит).

 <form>
    <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Select your type of Restaurant:</legend>
    <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
    <label for="checkbox-h-2a" onclick="onfilter()">Vegetarian</label>
    </fieldset>
</form>

<script>
function onfilter(){

if ($("#checkbox-h-2a").prop('checked')){

    document.getElementById("hehe").innerHTML = "Yo there";
}

if (!($("#checkbox-h-2a").prop('checked'))){
    document.getElementById("hehe").innerHTML = "";
}
}       
</script>
  

Вы уже загружаете jQuery, поэтому просто используйте jQuery для всего — это намного проще, работает лучше, на самом деле единственным недостатком jQuery является необходимость его загрузки — и вы уже это делаете. Поэтому я бы предложил использовать что-то вроде этого:

 $(function(){
  $(document).on('click', '#checkbox-h-2a', function(){
     if ( $(this).is(':checked') ) {
        // Do stuff
     }
     else{
        //Do stuff
     }
  });
});
  

Кроме того, я надеюсь, что вы на самом деле закрываете свой элемент ввода в своем HTML, и что это просто опечатка в вашем вопросе

     <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"
  

попробуйте:

 <fieldset data-role="controlgroup" data-type="horizontal">
   <legend>Select your type of Restaurant:</legend>
   <label for="checkbox-h-2a" >Vegetarian
      <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" />
   </label>
</fieldset>
  

видите, как надпись обходит флажок? также вы можете избавиться от встроенной функции в HTML с помощью предоставленного мной jQuery

Редактировать:

2 проблемы — вы выбираете jQuery 1.6, вам .on() нужна более новая версия, если вы должны использовать старый jQuery, дайте мне знать ,

другая проблема заключается в том, что весь код jQuery должен быть завернут в

 $(document).ready(function(){

   /// code here

});
  

или для краткости:

 $(function(){

// code here

});
  

Проблема в том, что во время нажатия на label флажок checked не был изменен, поэтому вам нужно переключить логику (хотя это выглядит странно) или вместо этого прикрепить обработчик к onchange событию флажка input :

 <!-- add onchange event handler -->
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" 
       onchange="onfilter()"/>
<!-- and remove the click handler -->
<label for="checkbox-h-2a">Vegetarian</label>
  

ДЕМОНСТРАЦИЯ.

Это связано с тем, как работает метка: при нажатии на метку она ищет прикрепленный элемент ввода с помощью for атрибута и пытается изменить соответствующее свойство ( checked для флажка, радио, …) или фокусировки элемента (для полей текстового поля). Итак, во время нажатия он сначала обрабатывает / вызывает ваш обработчик. Отсюда и проблема.

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