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

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

Любые идеи?

Ответов (7)

Решение

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

Например:

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

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

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

Пытаться,

.switch_ {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch_ input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.switch_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff2626;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch_slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .switch_slider {
  background-color: #12e4a0;
}

input:focus + .switch_slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .switch_slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.switch_slider.round {
  border-radius: 34px;
}

.switch_slider.round:before {
  border-radius: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div align="center"><label class="switch_">
  <input type="checkbox" id="size_act">
  <span class="switch_slider round"></span>
</label> 
</div>
<div align="center" onClick="$('#size_act').click();">Inactive / Active</div>

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

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

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

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

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

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

onClick="event.stopPropagation();"

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

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