По клику на произвольный рисунок сменить статус checkbox

@Compaq · Регистрация: 14.02.2013

Студворк — интернет-сервис помощи студентам

Привет, Всем

Есть скрипт, по клику на произвольную карту делает checkbox - checked (выделенным), теперь вопрос как его скрыть. То есть, чтобы по клику checkbox становился активным/неактивным.

Вот скрипт, который выделяет checkbox, а как задать, чтобы по повторному клику он становился неактивным

JavaScript
1
2
3
.click(function(){
                table.find('#'+this.id).attr('Checked','Checked');
            })

Буду благодарен за подсказку

mixenik · 23.12.2015, 13:39

JavaScript
1
2
3
4
5
6
7
.click(function(){
  var checkbox = table.find('#'+this.id)
  var isChecked = checkbox.attr('checked');
  
  checkbox.attr('checked', !isChecked);
  
})

но я бы советовал вместо $.attr() использовать $.prop()

@Compaq · 23.12.2015, 16:12 **[ТС]**

Спасибо Друг,

Не подскажешь, почему то checked статус присваивает, а checkbox когда по второму кругу идешь не выделяет?

mixenik · 23.12.2015, 16:23

Используй prop вместо attr

@Compaq · 23.12.2015, 16:28 **[ТС]**

Точно,

Спасибо, помогло. Я еще хотел спросить, а как можно сделать, чтобы по клику на сам checkbox шла обратная обработка рисунка?

Примерно, как тут

HTML5
1
http://envek.github.io/Amestris/

mixenik · 23.12.2015, 16:37

что-то типа

JavaScript
1
2
3
4
5
6
7
table.find('input[type=checkbox]').on('change', function(){
  if($(this).prop('checked')){
    //обработка рисунка для этого чекбокса, если он активен
  }else{
    // обработка рисунка, если чекбокс не активен
  }
});

@Compaq · 23.12.2015, 16:55 **[ТС]**

Блин, прошу прощения за беспокойство, но что-то не хочет выделять. Не подскажите, в чем может быть ошибка

.click(function(){
var checkbox = table.find('input:checkbox#'+this.id)
var isChecked = checkbox.prop('checked');
checkbox.prop('checked', !isChecked);

table.find('#'+this.id).on('change', function(){
if($(this).prop('checked')){
//обработка рисунка для этого чекбокса, если он активен
this.animate({
fill: '#FFF',
stroke: '#000'
}, 300);
}else{
// обработка рисунка, если чекбокс не активен
this.animate({
fill: '#e6e7e8',
stroke: '#B5B5B5'
}, 300);
}
});
});

mixenik · 23.12.2015, 16:59

вынеси из обработчика клика - это раз =)
в this лежит checkbox, а не картинка, т.е. тебе еще нужно найти картинку для этого чекбокса.

@Compaq · 23.12.2015, 17:10 **[ТС]**

Спасибо еще раз,

Картинка в SVG path, но не знаю как на нее повесить обработку. Не подскажите, как ее найти и повесить обработку

JavaScript
1
2
3
4
5
for (var country in paths) {
        
        var obj4 = r.path(paths[country].path);
        obj4.attr(attributes);
        arr[obj4.id] = country;

mixenik · 23.12.2015, 22:15

.click к чему привязывается?

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@Compaq 2 / 2 / 0 Регистрация: 14.02.2013 Сообщений: 218
	23.12.2015, 16:12 [ТС]
	Спасибо Друг, Не подскажешь, почему то checked статус присваивает, а checkbox когда по второму кругу идешь не выделяет? 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	23.12.2015, 16:23
	Используй prop вместо attr 1

@Compaq 2 / 2 / 0 Регистрация: 14.02.2013 Сообщений: 218
	23.12.2015, 16:55 [ТС]
	Блин, прошу прощения за беспокойство, но что-то не хочет выделять. Не подскажите, в чем может быть ошибка .click(function(){ var checkbox = table.find('input:checkbox#'+this.id) var isChecked = checkbox.prop('checked'); checkbox.prop('checked', !isChecked); table.find('#'+this.id).on('change', function(){ if($(this).prop('checked')){ //обработка рисунка для этого чекбокса, если он активен this.animate({ fill: '#FFF', stroke: '#000' }, 300); }else{ // обработка рисунка, если чекбокс не активен this.animate({ fill: '#e6e7e8', stroke: '#B5B5B5' }, 300); } }); }); 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	23.12.2015, 16:59
	вынеси из обработчика клика - это раз =) в this лежит checkbox, а не картинка, т.е. тебе еще нужно найти картинку для этого чекбокса. 1

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	23.12.2015, 22:15
	.click к чему привязывается? 0