Форум

monte · #1 (**permalink**) 29.03.2019, 22:45

Есть такой вот простенький чекбокс. Проблема в том, что некоторые браузеры некорректно себя веду, а некоторые - корректно. Как можно это исправить?
Используется jquery 1.11.1

<div class="radio_select">
    <button class="toggleSel circlesSel" type='button'>
        <span class="flaticon-meeting"></span>
        <span>Добавить</span>
    </button>
    <div class="radio_list">
        
                            
        <div class="com">
          <div class="checkboxwrap">
            <label for="29">
              <input type="checkbox" class="checkbox" id="29">
              Wife</label>
          </div>
        </div>
    

    </div>
</div>

$('.checkboxwrap').on('mousedown',e => {
    if($(e.target)[0].tagName == 'LABEL' && $(e.target).children('input').prop('checked')  || $(e.target)[0].tagName == 'INPUT' && $(e.target).prop('checked')){
        conf($(e.target));
    } else {
      console.log(12)
    }
});

function conf(e){
    let check = confirm('Точно?'),
        input = $('.checkboxwrap input');

    if(e[0].tagName == 'LABEL'){
        if(check) {
          input.eq($('label').index(e)).prop('checked',false);
          console.log(13)
        } else {
          input.eq($('label').index(e)).prop('checked',true);
        }
    }
    else{
        if(check) {
          input.eq($('input').index(e)).prop('checked',false);
          console.log(14)
        } else {
          input.eq($('input').index(e)).prop('checked',true);
        }
    }
}

Malleys · #2 (**permalink**) 29.03.2019, 23:25

Сообщение от monte

$(e.target)[0]

А это из какого ада?

Сообщение от monte

$(e.target)[0].tagName == 'LABEL' && $(e.target).children('input').prop('checked') || $(e.target)[0].tagName == 'INPUT' && $(e.target).prop('checked')

А зачем вам такая проверка, если label с input именно так и работают?

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
	<div class="radio_select">
		<button class="toggleSel circlesSel" type='button'>
			<span class="flaticon-meeting"></span>
			<span>Добавить</span>
		</button>
		<div class="radio_list">
			<div class="com">
				<div class="checkboxwrap">
					<label for="29">
						<input type="checkbox" class="checkbox" id="29">
						Wife
					</label>
				</div>
			</div>
		</div>
	</div>

	<script>
		
 $(".checkbox").on("change", ({ target }) => {
 	if(!target.checked) {
 		const check = confirm('Точно?');
 		target.checked = !check;
 	}
 });

	</script>

</body>
</html>

Там на сайте jQuery они пишут write less, do more, а куда не посмотри (где используется jQuery), получается write more, do less!

Без jQuery

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<div class="radio_select">
		<button class="toggleSel circlesSel" type='button'>
			<span class="flaticon-meeting"></span>
			<span>Добавить</span>
		</button>
		<div class="radio_list">
			<div class="com">
				<label>
					<input type="checkbox" class="checkbox">
					Wife
				</label>
			</div>
		</div>
	</div>

	<script>

document.addEventListener("change", ({ target }) => {
	if(target.matches(".checkbox") && !target.checked) {
		const check = confirm('Точно?');
		target.checked = !check;
	}
});

	</script>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript