Сделать динамически сгенерированный флажок щелчком, даже когда родительский div нажал

Question

Сделать динамически сгенерированный флажок щелчком, даже когда родительский div нажал

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

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

-2

jquery javascript html

задан adiga 25 January 2019 в 14:17

5 ответов

Другие вопросы по тегам:

jquery javascript html

Похожие вопросы:

score 0 · Answer 1

Упс! Не волнуйся, друг. Простая ошибка: после того, как пользователь нажал на флажок, по умолчанию будет установлен флажок. Ваш код здесь выполняет это действие «проверить» во второй раз. Таким образом, вы немедленно проверяете, а затем снимаете флажок!

Есть два возможных исправления для вас. Либо вы можете просто прекратить ставить / снимать флажки в вашем коде, другими словами, закомментируйте эту строку здесь:

//$('#row [type="checkbox"]').get(0).checked = !$('#row [type="checkbox"]').get(0).checked;

Или вы можете продолжать делать это, но вы должны отключить действие HTML по умолчанию, используя функцию

`enter code here`event.preventDefault()

К сожалению, я не мог не работает с jQuery ... Я сам не очень хорошо разбираюсь в этом, но уверен, что кто-то еще прокомментирует, как это сделать ниже!

score 0 · Answer 2

Вы можете просто пропустить переключатель флажка, если щелкнул элемент, был флажок.

//Generate dynamically div row encompassing checkbox and label
$('#wraper').append(`
<div id="row">
	<label>This is the checkbox</label>
  <input type="checkbox"></input>
</div>
<br>
<span class="msg"></span>
`);
//Attach delegated event listener to entire row
$('#wraper').on('click', '#row', function(e) {
  var $checkbox = $('#row [type="checkbox"]').eq(0);
  
  //Toggle checked attribute
  if (!$checkbox.is(e.target)) {
    $checkbox.prop('checked', !$checkbox.prop('checked'));
  }
  
  //Display checked status after click
  $('#wraper .msg').text(`Checkbox status is ${$checkbox.prop('checked')}`);
});

<!doctype html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>

<body>
  <div id="wraper"></div>
</body>

</html>

score 0 · Answer 3

Как уже упоминалось в комментариях, удалите логику click из своего кода. Это немедленно переписывает стандартную функциональность HTML. Если вы намерены установить флажок, даже если щелкнуть метку, вы можете использовать атрибут for и указать на флажок id:

Обновить : к флажку, установленному в любом месте от родителя div, затем добавьте обработчик click к родителю. Если цель щелчка не является checkbox, установите флажок. Если целью является checkbox, не делайте ничего.

$('#wraper').append(`
<div id="row">
	<label>This is the checkbox</label>
  <input type="checkbox"></input>
</div>
<br>
<span class="msg"></span>
`);

$('#wraper').on('click', '#row', function(e) {
  /* If the clicked element is not a checkbox,
      then force the check via jquery
  */
  if (e.target.type !== 'checkbox') {
    $(this).find('input').prop('checked', !$(this).find('input').prop('checked'))
  }
    // Display checked status after click
  $('#wraper .msg').text(`Checkbox status is ${$('#row [type="checkbox"]').get(0).checked}`);
  
});


$("#checkbox-test").change(function() {
  $('#wraper .msg').text(`Checkbox status is ${this.checked}`);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wraper"></div>

score 0 · Answer 4

Ваша основная проблема заключается в том, что когда вы нажимаете checkbox, событие распространяется на строку, так что это будет то же самое, что щелкнул флажок два раза. Решением является stopPropagation() события для родителя row при установке флажка:

// Generate dynamically div row encompassing checkbox and label

$('#wraper').append(`
    <div id="row">
      <label>This is the checkbox</label>
      <input type="checkbox"></input>
    </div>
    <br>
    <span class="msg"></span>
`);

// Attach delegated event listener to entire row.

$('#wraper').on('click', '#row', function()
{
    // Toggle checked attribute.

    $('#row [type="checkbox"]').get(0).checked = !$('#row [type="checkbox"]').get(0).checked;

    // Display checked status after click.

    $('#wraper .msg').text(`Checkbox status is ${$('#row [type="checkbox"]').get(0).checked}`);
});

$('#wraper').on('click', 'input[type="checkbox"]', function(e)
{
    $('#wraper .msg').text(`Checkbox status is ${$('#row [type="checkbox"]').get(0).checked}`);
    e.stopPropagation();
});

<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
  <div id="wraper"></div>
</body>
</html>

score 0 · Answer 5

Причина, по которой он ничего не делает, состоит в том, что если вы точно нажмете на флажок, ваш код немедленно вернет окно в прежнее состояние. Вы можете решить эту проблему, используя атрибут for на вашем ярлыке, а затем просто используя событие change на самом флажке:

Рефакторированный HTML:

<div id="row">
    <label for="checkbox1">This is the checkbox</label>
    <input type="checkbox" id="checkbox1"></input>
</div>

Обновлен JS:

$("#checkbox1").change(function() {
    $('#wraper .msg').text(`Checkbox status is ${this.checked}`);
}).change(); //execute immediately so the text displays.