Нажмите на 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>

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

Любые идеи?

25.02.2009 00:16:36
6 ОТВЕТОВ
РЕШЕНИЕ

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

Например:

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

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

39
11.09.2017 12:10:04
Я довольно новичок в вебе, и я на самом деле никогда не использовал <label for = "">. Если он точнее, чем наличие атрибута onClick для обоих тегов <div> и <input>, это может быть хорошо, но я не уверен, как это использовать.
occhiso 25.02.2009 00:38:03
Я только что прочитал соответствующую статью, которая объясняет это здесь: stackoverflow.com/questions/2123/… Спасибо, я думаю, я поэкспериментирую с этим.
occhiso 25.02.2009 00:40:10
Вы даже можете поместить атрибуты стиля в сам элемент label и полностью удалить div.
Zack The Human 25.02.2009 00:47:06
Кажется, я не могу заставить метку охватывать весь <div>, она распространяется только на фактическую метку флажка. На самом деле я собираюсь иметь изображение внутри div, а также флажок, но не могу получить ярлык, чтобы покрыть все это. В любом случае, спасибо, это было бы чище.
occhiso 25.02.2009 00:47:45
Мне нужен был дисплей: блок; и заменил div на метку: <label for = "test" style = "padding: 15px; border: 1px solid; display: block; background-color: # e0e0ff;"> <img src = "bla.gif" / > <br /> <input type = "checkbox" id = "test" /> Галочка! </ label>
occhiso 25.02.2009 00:59:17
onclick="if (event.target.tagName != 'INPUT') document.getElementById('cb').checked = !document.getElementById('cb').checked"
4
25.02.2009 00:18:00
Спасибо, я знал, что это будет что-то простое! Я сделал похожую вещь, но набил ее :)
occhiso 25.02.2009 00:21:16
Я знаю, что это год с опозданием, но я думаю, что это лучший ответ, поскольку он охватывает больше ситуаций. Если вы хотите сделать <TR>элемент кликабельным, labelметод не сработает, хотя это, безусловно, работает.
Stuart Clarke 23.02.2018 09:44:10

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

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

0
25.02.2009 00:39:00

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

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

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

onClick="event.stopPropagation();"

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

1
25.02.2009 03:52:23

Основываясь на некоторых из предыдущих ответов, это то, что лучше всего работает для меня с 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;
    }
  });
);
2
18.05.2011 16:47:53

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

0
9.11.2016 06:05:35