Автор Тема: JQuery получение идентификатора кнопки [решено] (Прочитано 3101 раз)

berkut_174 · « : 20.07.2015 22:01:24 »

Всем привет.

Есть код (для примера):

<html>
	    <head>
		<meta charset="utf-8" />
		<title>MY TEST</title>
		
		<script src="html/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
		<script src="html/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
		<script src="html/spinner/spin.js"></script>
		
		<script type="text/javascript">
		    
		    function SelectAll() {
			$(".check").prop("checked", "true");
		    }
		    
		    function ClearSelect() {
			$(".check").removeAttr("checked", "false");
		    }
		    
    		</script>		
	    </head>
	    <body>
    <div>
    <form method="POST" action="" id="tab_25">
    <div class="btn_control">
        <input type="button" name="select_25" value="Выделить все" onclick = "SelectAll()">
        <input type="button" name="unselect_25" value="Снять выделение" onclick = "ClearSelect()">
        <input type="submit" name="dwnld_25" value="Отправить выделенные">
    </div><br>
    <div>
        <input name="tab_25_9345" class = "check" size="20" type="checkbox">name1<br>
        <input name="tab_25_9357" class = "check" size="20" type="checkbox">name2<br>
        <input name="tab_25_9462" class = "check" size="20" type="checkbox">name3<br>
    </div>
    </form>
<form method="POST" action="" id="tab_26">
    <div class="btn_control">
        <input type="button" name="select_26" value="Выделить все" onclick = "SelectAll()">
        <input type="button" name="unselect_26" value="Снять выделение" onclick = "ClearSelect()">
        <input type="submit" name="dwnld_26" value="Отправить выделенные">
    </div><br>
    <div>
        <input name="tab_26_9345" class = "check" size="20" type="checkbox">name1<br>
        <input name="tab_26_9357" class = "check" size="20" type="checkbox">name2<br>
        <input name="tab_26_9462" class = "check" size="20" type="checkbox">name3<br>
    </div>
    </form>
</div>
</body>
</html>

При нажатии на кнопку "Выделить всё" помечаются все чекбоксы с классом check, а мне нужно чтобы эта кнопка помечала чекбоксы только на своей форме. То есть форма "tab_25" и пометить нужно только чекбоксы "tab_25_*".
Не могу сделать и найти не получается...
С JS совсем плохо у меня... :(

berkut_174 · « **Ответ #1 :** 20.07.2015 22:10:26 »

Либо класс добавить кнопке и такой же чекбоксам. У меня эти кнопки и чекбоксы генерируются.
Но главная проблема я не могу вообще никакие свойства от кнопки получить!
То есть нужно нечто:

Код: [Выделить]

function SelectAll() {
	получить_от_кнопки_её_класс
	$(".сюда_этот_класс_написать").prop("checked", "true");
}

ASte · « **Ответ #2 :** 20.07.2015 22:16:12 »

http://jquery.page2page.ru/index.php5/%D0%91%D0%BB%D0%B8%D0%B6%D0%B0%D0%B9%D1%88%D0%B8%D0%B9_%D0%BF%D0%BE%D0%B4%D1%85%D0%BE%D0%B4%D1%8F%D1%89%D0%B8%D0%B9_%D0%BF%D1%80%D0%B5%D0%B4%D0%BE%D0%BA
Видимо как-то так:
$(this).closest('form').find('input[type=button]').foreach(function() {
что-то сделать с каждым элементом
});

ASte · « **Ответ #3 :** 20.07.2015 22:30:05 »

В функции обработчике this укажет на обрабатываемый элемент (т.е. на кнопку)

berkut_174 · « **Ответ #4 :** 20.07.2015 22:33:29 »

ASte
Тут вообще мне не разобрать) Я вашу строку вставил, не выводит через alert. Такое ощущение, что вообще не отрабатывает.

Я попроще варианты нахожу http://javascript.ru/forum/dom-window/36861-uznat-kakojj-vybran-id.html#post243342, но так почему-то не работает. alert выводит undefined.

berkut_174 · « **Ответ #5 :** 20.07.2015 22:37:09 »

Кстати, по моей ссылке, если код прям вставить, то пашет для 'a', но при нажатии на кнопку -- undefined.

ASte · « **Ответ #6 :** 20.07.2015 22:45:22 »

Попробуйте повесить обработчики как-то так:

Код: [Выделить]

....
</body>
<script>
$('input[type=button').click(function(){
    $(this).closest('form').find('input[type=button]').foreach(function() {
    ..... что-то сделать с кнопкой

    });
});
</script>

berkut_174 · « **Ответ #7 :** 20.07.2015 22:45:25 »

Ан нет, всё же тоже пашет! Ура!

berkut_174 · « **Ответ #8 :** 20.07.2015 22:56:07 »

Но вот так не работает:

Код: [Выделить]

$(".btn_control input").click(function(e){
	var id = $(this).data("id");
	$(".check").prop("checked", "true");
});

ASte · « **Ответ #9 :** 20.07.2015 23:03:45 »

Воткнуть в код вызовы console.log() и определить в чем ошибка
- не вызывается обработчик вообще
- вызывается но не находит того что нужно
- вызывается, находит но не выполняет чего нужно

вывод console.log() смотреть в консоли браузера

berkut_174 · « **Ответ #10 :** 20.07.2015 23:12:37 »

ASte
В общем не знаю почему, но если в head писать, то не работает, если в body то нормально отрабатывает.

Сейчас осталось разобраться как разделить строку вида "select_25" на две переменных, где разделитель "_".
Потом на основе первой переменной выбирать действие, а вторая как идентификатор будет...

ASte · « **Ответ #11 :** 20.07.2015 23:19:49 »

split() - разбить строку на подстроки используя разделитель.
например:
"a_b".split("_")
результат: Array [ "a", "b" ]

berkut_174 · « **Ответ #12 :** 20.07.2015 23:27:19 »

Цитата: ASte от 20.07.2015 23:19:49

"a_b".split("_")

Спасиб, да уже нашёл.
Вот так сейчас, но unselect не отрабатывает:

Код: [Выделить]

$(".btn_control input").click(function(e){
        var id = $(this).data("id");
        var id = id.split("_");
        switch (id[0]) {
	    case "select":
		$(".check").prop("checked", "true");
		break;
	    case "unselect":
		$(".check").removeattr("checked", "false");
		break;
        }
        alert("Мой id :" + id[0]);
    });

ASte · « **Ответ #13 :** 20.07.2015 23:30:07 »

.removeAttr( attributeName )
ИМХО "false" лишнее в removeAttr

berkut_174 · « **Ответ #14 :** 20.07.2015 23:36:22 »

Цитата: ASte от 20.07.2015 23:30:07

лишнее в removeAttr

Да, скорей всего, но походе дело не в этом...
Вот так вывод настроил:

Код: [Выделить]

$(".btn_control input").click(function(e){
        var id = $(this).data("id");
        alert(id);
        var id = id.split("_");
        alert(id[0]);
        switch (id[0]) {
	    case "select" :
		$(".check").prop("checked", "true");
		break;
	    case "unselect" :
		$(".check").removeattr("checked");
		break;
        }
        alert("Мой id :" + id[0]);
    });

Первые два alert выводятся для всех и всё правильно показывают, а третий только для select выводит...
Я видимо со switch неправильно поступил...

Через if что ли попробовать...

Форум сообщества
Альт Линукс