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

Это, кажется, простая проблема, но я не использую много 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>

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

Любые идеи?

Ответы

Ответ 1

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

Например:

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

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

Ответ 2

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

Ответ 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;
    }
  });
);

Ответ 4

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

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

Ответ 5

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

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

Простейшим решением было бы остановить распространение события, добавив его во входной элемент:

onClick="event.stopPropagation();"

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

Ответ 6

Вот моя реализация флажка для 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 в кодефере