Форум

Scrum · #1 (**permalink**) 10.04.2014, 17:42

Доброго дня имеем простейшую конструкцию:

<a href="#">
	<input type="checkbox" name=""> test
</a>

$("a").on("click", function(event){

	$(this).children("input").attr("checked", true)
	return false

})

Очень бы хотелось поменять значение у чекбокса кликая на чекбокс.
К сожалению структуру HTML поменять нет возможности.

dmitriymar · #2 (**permalink**) 10.04.2014, 18:32

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

4
return false

убрать

nerv_ · #3 (**permalink**) 10.04.2014, 18:35

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

Очень бы хотелось поменять значение у чекбокса кликая на чекбокс

$(this).children("input").prop("checked", true);

Scrum · #4 (**permalink**) 10.04.2014, 18:39

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

убрать

Будет скачек.

Scrum · #5 (**permalink**) 10.04.2014, 18:40

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

$(this).children("input").prop("checked", true);

Не прокатило ) нужно кликать именно на чекбоксе.

dmitriymar · #6 (**permalink**) 10.04.2014, 20:01

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

Очень бы хотелось поменять значение у чекбокса кликая на чекбокс.

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

Будет скачек.

а вы точно уверены, что сами понимаете чего хотите? такого термина как скачёк нет

1 как бы чек бокс сам при клике будет менять своё значение - это поведение предопределённое
2 return false - вы убиваете поведение предопределённое

рони · #7 (**permalink**) 10.04.2014, 20:32

Scrum,
во блин ))) хоть по ссылке хоть по чекбоксу

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
   $(function ()
{
   $("a").on("click", function(event){
   if(this != event.target) return;
   event.preventDefault();
   var input = $(this).children("input");
   input.prop("checked", !input[0].checked);
})

})
  </script>
</head>

<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a href="#">
    <input type="checkbox" name=""> test
</a>
</body>
</html>

Scrum · #8 (**permalink**) 11.04.2014, 10:55

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

а вы точно уверены, что сами понимаете чего хотите? такого термина как скачёк нет

1 как бы чек бокс сам при клике будет менять своё значение - это поведение предопределённое
2 return false - вы убиваете поведение предопределённое

Употребляя термин "скачок" - я подразумеваю предопределенные действия для элемента A. в данном случае попытку перейти на закладка внутри страницы, но т.к. в случае имени закладки я использую заглушку в виде # то по моим соображениям браузер пытается найти закладку и не найдя ее сдвигает/скроллит/перемещает страницу к началу в следствие чего я отменяю его предопределенное действие (return false).

Совершенно ясно понимаю поставленную перед собой задачу.
Я хочу что бы при клике именно на чекбокс у меня не было предопределенного действия для элемента А и осуществилось предопределенное действие для чекбокса, но по странным (хотя вроде бы и понятным и логичным) обстоятельствам в event.target попадает элемент input для которого так же отрабатывает отмена предопределенного действия.

рони
Увы происходит "Скачёк". в firefox, opera, в chrome b ie10 - отрабатывает корректно.
Из приятного понравилась конструкция с проверкой )

рони · #9 (**permalink**) 11.04.2014, 12:48

Scrum,
как отменить всплытие для в firefox пока загадка )))

рони · #10 (**permalink**) 12.04.2014, 20:45

Scrum,
Вариант ... для firefox и прочих ...

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
$(function () {
     $("a").on("click", function (event) {
         var input = $("input:checkbox", this),
             checked = !input.prop("checked");
         $(event.target).is(":checkbox") && (checked = !checked);
         window.setTimeout(function () {
             input.prop("checked", checked)
         }, 0);
         return false
     })
 });
  </script>
</head>

<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<a href="#">
    <input type="checkbox" name=""> test
</a>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript