Форум программистов, компьютерный форум, киберфорум
jQuery
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > JavaScript > jQuery
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.61/18: Рейтинг темы: голосов - 18, средняя оценка - 4.61
1042 / 577 / 242
Регистрация: 15.01.2019
Сообщений: 2,178
Записей в блоге: 1
1

Как оставить в checkbox свойство checked true для конкретного элемента при отмене подтверждения

28.03.2019, 15:15. Показов 3607. Ответов 10
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Суть в том, что только если человек убирает галочку, нужно выводить окно с confirm'om.
Далее 2 вариант:
1. Если человек подтверждает - убираем галочку.
2. Если человек не подтверждает - то нужно, чтобы галочка и собственно свойство checked остались. Возможно, здесь также есть два варианта решения: 1. не убирать её вовсе - не знаю, как это реализовать; 2. если и убирать, то вернуть обратно...
Вот, что пробовал, но что-то у меня не то в цикле(
В итоге нужно, чтобы перед отправкой ajax запроса в списке остались только выбранные элементы. А в идеале, конечно, чтобы в этом списке были только те элементы, которые не было изначально выбраны при загрузке страницы,
HTML5
1
2
3
4
5
6

<div class="checkbox">
    <label>
        <input type="checkbox" data-bind="checked: params.availToStream" checked>
        {{ trans('stream::main.onlyAvailToStream') }} 
    </label>
</div>
https://jsfiddle.net/7sud8341/3/
0
Лучшие ответы (1)
Сообщение: #13445273
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 28.03.2019, 15:15
Ответы с готовыми решениями:

Нужно, чтобы при checkbox.checked=true я мог набирать текст в textbox-е, ну и соответственно при checkbox.checked=false - нет.
есть checkbox и textbox. Нужно, чтобы при checkbox.checked=true я мог набирать текст в textbox-е,...

Как убрать/задать элементу checkbox свойство checked?
Здравствуйте. У меня страница генерится по шаблону с нескольких частей. Основное меню и посередине...

Как одновременно поменять свойство value у checkbox с true на false для всех checkbox-ов, находящихся на одном листе?
Всем добрый день! Подскажите, пожалуйста, как одновременно поменять свойство value у checkbox с...

if checkbox.Checked=true
у меня вот такой код if checkbox8.Checked=true then begin if checkbox7.Checked=true or...

10
Эксперт JS
2035 / 1094 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
29.03.2019, 02:20 2
Лучший ответ Сообщение было отмечено m0nte-cr1st0 как решение

Решение

m0nte-cr1st0,

Так -> https://codepen.io/Mr_Sergo/pe... itors=1000 ??
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div class="checkbox">
    <label>
        <input type="checkbox" data-bind="checked: params.availToStream">
        {{ trans('stream::main.onlyAvailToStream') }} 
    </label><br><br>
    <label>
        <input type="checkbox" data-bind="checked: params.availToStream" checked>
        {{ trans('stream::main.onlyAvailToStream') }} 
    </label><br><br>
    <label>
        <input type="checkbox" data-bind="checked: params.availToStream">
        {{ trans('stream::main.onlyAvailToStream') }} 
    </label>
</div>
 
<script>
    $('.checkbox').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));
        }
    });
 
    function conf(e){
        let check = confirm('Точно?'),
            input = $('.checkbox input');
 
        if(e[0].tagName == 'LABEL'){
            if(check) input.eq($('label').index(e)).prop('checked',true);
            else input.eq($('label').index(e)).prop('checked',false);
        }
        else{
            if(check) input.eq($('input').index(e)).prop('checked',true);
            else input.eq($('input').index(e)).prop('checked',false);
        }
    }
</script>
Добавлено через 4 минуты
Или наоборот -> https://codepen.io/Mr_Sergo/pe... itors=1000 ??
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<div class="checkbox">
    <label>
        <input type="checkbox" data-bind="checked: params.availToStream">
        {{ trans('stream::main.onlyAvailToStream') }} 
    </label><br><br>
    <label>
        <input type="checkbox" data-bind="checked: params.availToStream" checked>
        {{ trans('stream::main.onlyAvailToStream') }} 
    </label><br><br>
    <label>
        <input type="checkbox" data-bind="checked: params.availToStream">
        {{ trans('stream::main.onlyAvailToStream') }} 
    </label>
</div>
 
<script>
    $('.checkbox').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));
        }
    });
 
    function conf(e){
        let check = confirm('Точно?'),
            input = $('.checkbox input');
 
        if(e[0].tagName == 'LABEL'){
            if(check) input.eq($('label').index(e)).prop('checked',false);
            else input.eq($('label').index(e)).prop('checked',true);
        }
        else{
            if(check) input.eq($('input').index(e)).prop('checked',false);
            else input.eq($('input').index(e)).prop('checked',true);
        }
    }
</script>
1
1042 / 577 / 242
Регистрация: 15.01.2019
Сообщений: 2,178
Записей в блоге: 1
29.03.2019, 02:41  [ТС] 3
Mr_Sergo, спасибо. Второй вариант почти верен. Нужно поменять только true/false местами.
Завтра попробую это всё со списком соединить.
0
Эксперт JS
2035 / 1094 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
29.03.2019, 02:47 4
Цитата Сообщение от m0nte-cr1st0 Посмотреть сообщение
Нужно поменять только true/false местами
Если поменять true/false местами получается как-то, мягко говоря, неправильно -> https://codepen.io/Mr_Sergo/pe... itors=1000

Либо я что-то не понимаю
0
1042 / 577 / 242
Регистрация: 15.01.2019
Сообщений: 2,178
Записей в блоге: 1
29.03.2019, 02:49  [ТС] 5
Mr_Sergo, можете вкратце объяснить эту часть?
Javascript
1

$(e.target).children('input').prop('checked')
вот эту
Javascript
1

e[0].tagName
и вот эту
Javascript
1

input.eq($('label').index(e))
буду весьма признателен.

Добавлено через 1 минуту
Цитата Сообщение от Mr_Sergo Посмотреть сообщение
Если поменять true/false местами получается как-то, мягко говоря, неправильно
ну почему же? мне именно при конфирме нужно убирать галочки)
Цитата Сообщение от m0nte-cr1st0 Посмотреть сообщение
Если человек подтверждает - убираем галочку.
может, это я просто неверно логику строю)
0
Эксперт JS
2035 / 1094 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
29.03.2019, 03:08 6
m0nte-cr1st0,

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// если целевой клик был сделан по тегу label
$(e.target)[0].tagName == 'LABEL'
 
// и
&&
 
// у дочернего элемента целевого клика отмечен чекбокс (checkbox == true)
$(e.target).children('input').prop('checked')
 
// то вызываем функцию и передаем ей элемент по которому был сделан клик
conf($(e.target));
 
/* conf */
    if(e[0].tagName == 'LABEL'){  // если функция получает аргумент в виде тега label
        
        // если confirm == true
        if(check)
            // то ставим галку у инпута (чекбокса) под номером соответствующим "кликнутому" label-у
            input.eq($('label').index(e)).prop('checked',true);
        // иначе снимаем галку
        else input.eq($('label').index(e)).prop('checked',false);
    }
/* conf */
вроде все верно объяснил... но уже глаза закрываются- может что-то не так немного описал

Добавлено через 26 секунд
m0nte-cr1st0,

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// если целевой клик был сделан по тегу label
$(e.target)[0].tagName == 'LABEL'
 
// и
&&
 
// у дочернего элемента целевого клика отмечен чекбокс (checkbox == true)
$(e.target).children('input').prop('checked')
 
// то вызываем функцию и передаем ей элемент по которому был сделан клик
conf($(e.target));
 
/* conf */
    if(e[0].tagName == 'LABEL'){  // если функция получает аргумент в виде тега label
        
        // если confirm == true
        if(check)
            // то ставим галку у инпута (чекбокса) под номером соответствующим "кликнутому" label-у
            input.eq($('label').index(e)).prop('checked',true);
        // иначе снимаем галку
        else input.eq($('label').index(e)).prop('checked',false);
    }
/* conf */
вроде все верно объяснил... но уже глаза закрываются- может что-то не так немного описал

Добавлено через 6 секунд
m0nte-cr1st0,

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// если целевой клик был сделан по тегу label
$(e.target)[0].tagName == 'LABEL'
 
// и
&&
 
// у дочернего элемента целевого клика отмечен чекбокс (checkbox == true)
$(e.target).children('input').prop('checked')
 
// то вызываем функцию и передаем ей элемент по которому был сделан клик
conf($(e.target));
 
/* conf */
    if(e[0].tagName == 'LABEL'){  // если функция получает аргумент в виде тега label
        
        // если confirm == true
        if(check)
            // то ставим галку у инпута (чекбокса) под номером соответствующим "кликнутому" label-у
            input.eq($('label').index(e)).prop('checked',true);
        // иначе снимаем галку
        else input.eq($('label').index(e)).prop('checked',false);
    }
/* conf */
вроде все верно объяснил... но уже глаза закрываются- может что-то не так немного описал
1
1042 / 577 / 242
Регистрация: 15.01.2019
Сообщений: 2,178
Записей в блоге: 1
29.03.2019, 03:21  [ТС] 7
Mr_Sergo, спасибо, мне скорее этот синтаксис не понятен вроде e[0], e.target)[0]. Для меня, как для питониста, такое чувство, что это список, из которого мы берём первый элемент. Но это ведь не так?
И почему пишется "e"? Вернее, как оно задаётся? Оно равно элементу с классом ".checkbox", по которому производится клик, если я верно понимаю? То есть можно вместо "e" писать ".checkbox"?

Добавлено через 1 минуту
Цитата Сообщение от m0nte-cr1st0 Посмотреть сообщение
по которому производится клик
любой кнопкой мыши*
0
Эксперт JS
2035 / 1094 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
29.03.2019, 03:29 8
del
0
1042 / 577 / 242
Регистрация: 15.01.2019
Сообщений: 2,178
Записей в блоге: 1
29.03.2019, 16:26  [ТС] 9
Вот как решил.
Список обрабатывается, как и требовалось - по клику по кнопке.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<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>
                    <input type="checkbox" class="checkbox" id="1">
                    title1
                  </label>
                </div>
            </div>
            <div class="com">
                <div class="checkboxwrap">
                  <label>
                    <input type="checkbox" class="checkbox" id="2">
                    title2
                  </label>
                </div>
            </div>
            <div class="com">
                <div class="checkboxwrap">
                  <label>
                    <input type="checkbox" class="checkbox" id="3">
                    title3
                  </label>
                </div>
            </div>
 
    </div>
</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

$('.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));
    }
});
 
function conf(e){
    let check = confirm('Точно?'),
        input = $('.checkboxwrap input');
 
    if(e[0].tagName == 'LABEL'){
        if(check) input.eq($('label').index(e)).prop('checked',true);
        else input.eq($('label').index(e)).prop('checked',false);
    }
    else{
        if(check) input.eq($('input').index(e)).prop('checked',true);
        else input.eq($('input').index(e)).prop('checked',false);
    }
}
 
$("button.toggleSel").click(function(){
    var run_ajax = $('.toggleSel').attr('data-click-state');
    
    if (run_ajax == '1') {
        var listCheck = [];
 
        $.each($("input[type='checkbox']:checked"), function(){
            if (!($(this).attr('id'))) {
                listCheck.push($(this).attr('id'));
            }
        });
 
        if (listCheck.length > 0) {
            data = {
              'choices': listCheck
               }
            
            $.ajax({
              type: "POST",
              url: "",
              data: data,
              error: function(result) {
              alert('Произошла ошибка. Попробуйте позже.');
              }
            })
        }
    }
})
Добавлено через 1 час 56 минут
Подскажите, почему в список заносятся ещё значения undefined?
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

$('.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));
    }
});
 
function conf(e){
    let check = confirm('Точно?'),
        input = $('.checkboxwrap input');
 
    if(e[0].tagName == 'LABEL'){
        if(check) input.eq($('label').index(e)).prop('checked',true);
        else input.eq($('label').index(e)).prop('checked',false);
    }
    else{
        if(check) input.eq($('input').index(e)).prop('checked',true);
        else input.eq($('input').index(e)).prop('checked',false);
    }
}
 
$("button.toggleSel").click(function(){
    var run_ajax = $('.toggleSel').attr('data-click-state');
    
    if (run_ajax == '1') {
        var listCheck = [];
 
        $.each($("input[type='checkbox']:checked"), function(){
            listCheck.push($(this).attr('id'));
        });
 
        if (listCheck.length > 0) {
            data = {
              'choices': listCheck
               }
            
            $.ajax({
              type: "POST",
              url: "",
              data: data,
              error: function(result) {
              alert('Произошла ошибка. Попробуйте позже.');
              }
            })
        }
    }
})
Если смотреть в IDE каком-то, то всё нормально. Но на сайте в консоле - нет.
Может как-то фильтром отбрасывать эти ненужные undefined?

С помощью проверки решил, конечно.
Javascript
1

if (!($(this).attr('id'))){
Но всё же интересна сама причина добавления их...
1
Эксперт JS
2035 / 1094 / 409
Регистрация: 29.04.2016
Сообщений: 2,625
29.03.2019, 17:15 10
Цитата Сообщение от m0nte-cr1st0 Посмотреть сообщение
Может как-то фильтром отбрасывать эти ненужные undefined?
Нет. Если есть вероятность того что значение может быть undefined то обычно так и делают как это сделали вы- предварительно проверяют на undefined а уж после, если не undefined, продолжают работу с текущим значением. По крайней мере, лично я, не стал бы пользоваться никакими фильтрами в данной ситуации.

Добавлено через 8 минут
Только так наверное правильней будет
Javascript
1
2
3
4
5
6

$.each($("input[type='checkbox']:checked"), function(){
    // если значение true (не false или не undefined и т.д.)
    if($(this).attr('id'))
        // то добавить в массив
        listCheck.push($(this).attr('id'));
});
1
1042 / 577 / 242
Регистрация: 15.01.2019
Сообщений: 2,178
Записей в блоге: 1
30.03.2019, 00:14  [ТС] 11
Цитата Сообщение от Mr_Sergo Посмотреть сообщение
Если поменять true/false местами получается как-то, мягко говоря, неправильно
я вас понял, кажется...

я тут посмотрел, что поведение одного и того же скрипта кардинально отличается Оо
можно ли это как-то безболезненно фиксить? а то как-то жаль потраченного времени и сил(

Добавлено через 32 секунды
Цитата Сообщение от Mr_Sergo Посмотреть сообщение
Если поменять true/false местами получается как-то, мягко говоря, неправильно
я вас понял, кажется...

я тут посмотрел, что поведение одного и того же скрипта кардинально отличается Оо
можно ли это как-то безболезненно фиксить? а то как-то жаль потраченного времени и сил(

Добавлено через 1 минуту
Я ещё думал, что как-то нелогично смотрится код и поведение скрипта (в фаерфокс), но списывал это на нехватку знаний в этой области

Добавлено через 1 час 32 минуты
jquery 1.11, если что

Добавлено через 1 час 42 минуты
Как-то странно этот ваш js работает, либо же я чего не понимаю.
Кажется, таким образом удалось добиться одинакового результата. По крайней мере, в фаерфоксе и хроме работает одинаково.
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13

$('.checkbox').change(function(){
    if ($(this).prop('checked')){
        choice = $(this).attr('id')
    } else {
        var conf = confirm('ok?');
        if (conf) {
            console.log('unchecked ok');
            choice = $(this).attr('id')
        } else {
            $(this).prop('checked',true);
        }
    }
});
0
30.03.2019, 00:14
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 30.03.2019, 00:14
Помогаю со студенческими работами здесь

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

Как при старте программы восстановить в субменю Checked true из ini файла
Всем привет! :) Вот столкнулся с такой проблемой . во время работы с программой в суб-меню я...

Как при установке свойства checked на checkbox сделать ее видимой?
Еще такой вопрос: У меня есть таблица, которая изначально скрыта (style=&quot;display:none&quot;), как при...

Как можно задать checked или что то еще другим значениям на сайте ? А то при использовании checked для дргого
Как можно задать checked или что то еще другим значениям на сайте ? А то при использовании...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru