Нажмите на div, чтобы установить флажок внутри него, используя JavaScript

Question

Это кажется простой проблемой, но я не использую много javascript.

У меня есть div с флажком, и я хотел бы, чтобы весь div переключал флажок. Это то, что я до сих пор:

<div style="padding: 2em; border: 1px solid"
     onClick="if (document.getElementById('cb').checked) document.getElementById('cb').checked=false; else document.getElementById('cb').checked=true;">
  <input name="cb" id="cb" type="checkbox">
</div>

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

Есть идеи?

Answer 1

Возможно, вы могли бы реализовать это более надежным и доступным способом, используя элемент label, чтобы обернуть область, которую вы хотите щелкнуть.

Например:

<label for="cb">
    <div style="padding: 2em; border: 1px solid">
        <input name="cb" id="cb" type="checkbox">
    </div>
</label>

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

Answer 2

onclick="if (event.target.tagName != 'INPUT') document.getElementById('cb').checked = !document.getElementById('cb').checked"

Answer 3

Исходя из некоторых предыдущих ответов, это то, что лучше всего сработало для меня с html, например:

<div class="option_item">
  <input type="checkbox" value="1" checked="checked">
</div>

jQuery, как это:

$.fn.toggleCheckbox = function() {
  this.attr('checked', !this.attr('checked'));
}

$(document).ready(function(){
  $(".option_item").click(function (e) {    
    if (e.target.tagName != 'INPUT') {
      $(this).find("input").toggleCheckbox();
      return false;
    }
  });
);

Answer 4

Корень проблемы в том, что когда вы нажимаете на флажок, событие click распространяется вверх по DOM к родительским элементам.

Таким образом, флажок обрабатывает событие click, переключаясь сам, а затем DIV получает событие click и снова переключает флажок.

Самое простое решение - остановить распространение события, добавив его к элементу ввода:

onClick="event.stopPropagation();"

Хотя это определено в модели событий W3C DOM уровня 2, она может поддерживаться не во всех браузерах, поэтому вы можете использовать кросс-браузерную библиотеку, такую ​​как Prototype или jQuery, для обеспечения совместимости.

Answer 5

Вот моя реализация чекбокса для div

Ссылка: https://codepen.io/ashwinshenoy/pen/oYXqMV

       <div id="checkboxes">
            <input type="checkbox" name="rGroup" class="check_cat" value="Adventure Sports" id="r1"/>
            <div class="check_overlay">
                <i class="fa fa-check-circle"></i>
            </div>
            <label class="whatever" for="r1">
                <img src="http://i.imgur.com/SfQVTlR.png" class=" img-responsive width100" />
                <div class="row">
                    <div class="col-xs-offset-3 col-xs-3">
                        <div class="check_details">
                            <i class="fa fa-user"><span> 500</span></i>
                        </div><!--check_details end-->
                    </div><!--col-xs-* end-->
                    <div class="col-xs-3">
                        <div class="check_details">
                            <i class="fa fa-bitbucket"><span> 500</span></i>
                        </div><!--check_details end-->
                    </div><!--col-xs-* end-->
                </div><!--inner row end-->
            </label>
            <br>
            <div class="check_name_div">
                Adventure Sports
            </div>
        </div><!--checkboxes end-->

Обновлены CSS и JS в коде ручки

Answer 6

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

http://docs.jquery.com/Effects/toggle