Как сделать checkbox равным 0 или 1?

Question

[Николай Громов]

Доброго времени суток.
Есть такая форма в хтмл

<div class="addItemProject form-group" id="addItemProject">
    <label for="addNewItemProject">Добавить новый проект</label>
    <input type="text" class="form-control" id="newItemTitle" name="newItemTitle" aria-describedby="newTitle" placeholder="Новый проект">
    <small id="newItemTitle" class="form-text text-muted">Введите название нового проекта</small>
    <div class="form-check">
        <input class="form-check-input" id="itemIsThumb" name="itemIsThumb" type="checkbox"  value="checked" />
        <label class="form-check-label" for="itemIsThumb">
            Мини фото?
        </label>
    </div>
    <button class="btn btn-primary" type="submit" onclick="newItemProject();">Добавить</button>
</div>

Она обрабатывается js

function getData(obj_form){
    var hData = {};
    $('input, textarea, select', obj_form).each(function(){
        if(this.name && this.name!==''){
            hData[this.name] = this.value;
            console.log('hData[' +this.name + '] = ' + hData[this.name]);
        }
    });
    return hData;
};

function newItemProject(){
    var postData = getData('#addItemProject');

    $.ajax({
        type: 'POST',
        async: true,
        url: "/admin/addnewproject/",
        data: postData,
        dataType: 'json',
        success: function(data){
            if(data['success']){
                alert(data['message']);
                $('#newItemTitle').val('');
                $('#itemIsThumb').val('');
            } else {
                alert(data['message']);
            }
        }
    });
}

и передает в пхп

function addnewprojectAction(){
    $newItemTitle = $_POST['newItemTitle'];
    $itemIsThumb = $_POST["itemIsThumb"];
    
    $res = addItemProject($newItemTitle, $itemIsThumb);
    if ($res){
        $resData['success'] = 1;
        $resData['message'] = 'Изменения успешно внесены';
    } else {
        $resData['success'] = 0;
        $resData['message'] = 'Ошибка изменения данных';
    }
    echo json_encode($resData);
    return;
}

Подскажите как можно сделать (желательно в js), что бы чекбокс в пхп приходил равный 0 или 1 (false, true)? На данный момент из js приходит itemIsThumb: "checked" всегда, и не важно стоит флажок или нет.

Answer 1

[AngReload]

У checkbox отмечен он или нет определяется по наличию атрибута checked, а value не меняется.
https://developer.mozilla.org/en-US/docs/Web/HTML/...

function getData(obj_form){
    var hData = {};
    $('input, textarea, select', obj_form).each(function(){
        if(this.name && this.name!=='') {
            var data;
            if (this.type === 'checkbox') {
                console.log('ветка true');
                data = this.checked;
            } else {
                console.log('ветка false');
                data = this.value;
            }
            hData[this.name] = data;
            console.log('hData[' +this.name + '] = ' + hData[this.name]);
        }
    });
    return hData;
};

PS: В value надо писать что он означает, а не отмечен он или нет.

Comments

[Николай Громов]

Не могли бы вы показать как это условие вставить в вторую функцию js, я просто с ним вообще не дружу?

[AngReload]

Николай Громов, вторая без изменений.

[Николай Громов]

Всеравно itemIsThumb равно либо значению value, либо если его убрать то равняется "on". И еще phpstorm почему-то ругается на let.

[AngReload]

Вместо let можно написать var, тогда перестанет ругаться.

itemIsThumb равно либо значению value, либо если его убрать то равняется "on".

Надо подумать.

[Николай Громов]

AngReload,

[AngReload]

Что написано в консоли браузера при нажатии кнопки Добавить? (нажать F12 -> вкладка Console или Консоль)
Там должно быть что то типа

hData[newItemTitle] = Надпись из поля ввода newItemTitle
hData[itemIsThumb] = true или false

[Николай Громов]

AngReload,
hData[newItemTitle] = sgfgsfg
hData[itemIsThumb] = on

on потому что value в html сейчас отсутствует, так бы было значение value

[AngReload]

Может быть вы не сохранили изменения в файле или в браузере нужно принудительно обновить страницу по Control + F5. У нас должен быть одинаковый код, но у вас как будто бы старый, без условия.

Я изменил код, попробуйте его должно получиться так (с надписями о том какая ветка условия выполняется):

[Николай Громов]

AngReload,
Кстати, что с let data, что с var data

if (this.type === 'checkbox') {
                data = this.checked;
            } else {
                data = this.value;
            }

в этой части кода data идет как-будто нигде не используется и при наведении на нее выдает такое сообщение The value assigned is never used

[AngReload]

А у вас строка как у меня в коде:
hData[this.name] = data;
Или всё еще как у вас в старом коде:
hData[this.name] = this.value;
Вы наверное заменили только часть функции?

[Николай Громов]

AngReload, в phpStorm изменения сохраняются автоматически, а firefox я всегда обновляю через ctrl+F5. Да и в отладчике если смотреть то он видит новый код. Пошагово прохожу скрипт он как и положено сначала идет в else, следующим заходом в часть если условие верно. Но значение itemIsThumb не меняется

[AngReload]

Николай Громов,
Может вообще скопировать этот участок кода из редактора обратно сюда в комментарии? Я не могу поверить что у тебя там тот код что и должен быть. The value assigned is never used, когда переменная записывается в объект, этого не может быть, как мне кажется.

[Николай Громов]

AngReload,

А у вас строка как у меня в коде:
hData[this.name] = data;
Или всё еще как у вас в старом коде:
hData[this.name] = this.value;
Вы наверное заменили только часть функции?

УПС!))) Не заметил. Спасибо, что помогли разобраться!

[Николай Громов]

AngReload, Здравствуйте. Не могли бы вы ответить еще на один похожий вопрос?

[AngReload]

Николай Громов, здравствуйте. Почему нет?

[Николай Громов]

AngReload,
Есть такой чекбокс.

<input class="form-check-input forMenu" type="checkbox" id="itemIsActive_{$item->id}" {if $item->is_active == 0} checked="checked" {/if} />

он среди прочих обрабатывается js

function updateMenu(itemId){
    var itemLabel = $('#itemLabel_' + itemId).val();
    var itemUrl = $('#itemUrl_' + itemId).val();
    var itemIsActive = $('#itemIsActive_' + itemId).val();
    var itemDescription = $('#itemDescription_' + itemId).val();
    if(!itemIsActive){
        itemIsActive = 1;
    } else {
        itemIsActive = 0;
    }
    var postData = {itemId: itemId, itemLabel: itemLabel, itemUrl: itemUrl,
        itemIsActive: itemIsActive, itemDescription:itemDescription};
    $.ajax({
        type: 'POST',
        async: true,
        url: "/admin/updatemenu/",
        data: postData,
        dataType: 'json',
        success: function(data){
            if(data['success']){
                alert(data['message']);
            } else {
                alert(data['message']);
            }
        }
    });
}

как его можно переделать что бы он передавал или 0 или 1, в зависимости от того стоит галочка или нет. Сейчас он передает одно значение невзирая на галочку.

[AngReload]

Николай Громов, вот, там только четыре новые строки, остальное не поменялось

function updateMenu(itemId){
    var itemLabel = $('#itemLabel_' + itemId).val();
    var itemUrl = $('#itemUrl_' + itemId).val();
    var itemIsActive = $('#itemIsActive_' + itemId).val();
    var itemDescription = $('#itemDescription_' + itemId).val();
    if(!itemIsActive){
        itemIsActive = 1;
    } else {
        itemIsActive = 0;
    }

    var elem = document.getElementById('itemIsActive_' + itemId);
    if (elem && elem.type === 'checkbox') {
        itemIsActive = elem.checked ? 1 : 0;
    }

    var postData = {itemId: itemId, itemLabel: itemLabel, itemUrl: itemUrl,
        itemIsActive: itemIsActive, itemDescription:itemDescription};
    $.ajax({
        type: 'POST',
        async: true,
        url: "/admin/updatemenu/",
        data: postData,
        dataType: 'json',
        success: function(data){
            if(data['success']){
                alert(data['message']);
            } else {
                alert(data['message']);
            }
        }
    });
}

[Николай Громов]

AngReload, может тогда это условие

if(!itemIsActive){
        itemIsActive = 1;
    } else {
        itemIsActive = 0;
    }

вообще убрать?

[AngReload]

Николай Громов, может оно где-то используется, не для чекбоксов? Я не знаю, вот и не рискнул.

[Николай Громов]

AngReload, нет, он не нужен. Огромное спасибо. Вы только на js специализируетесь или php тоже?

[AngReload]

Николай Громов, плохо знаю, не рискнул бы отвечать на вопросы.

[Николай Громов]

AngReload, Получается в основном js?

[AngReload]

Николай Громов, да. В моём профиле не сложно увидеть какими вопросами я интересуюсь. Почему спрашиваете?

Answer 2

[Antony Tkachenko]

Самый простой вариант - добавить hidden input:

<input type="hidden" name="checkbox" value="0" />
<input type="checkbox" name="checbox" value="1" />

Comments

[Merk47]

Спасибо, человек! Твой способ дейстивтельно простой и работает.

Answer 3

[Merk47]

document.addEventListener('DOMContentLoaded', e => {
    for (let checkbox of document.querySelectorAll('input[type=checkbox]')) {
        checkbox.value = checkbox.checked ? 1 : 0;
        checkbox.addEventListener('change', e => {
                e.target.value = e.target.checked ? 1 : 0;
        });
    }
});

Но осторожнее, это меняет поведение для всех checkbox и может сломать систему, если этот скрипт добавить как глобальный.
У Antony Tkachenko способ попроще и работает

Answer 4

[Arman]

а чем не нравится https://api.jquery.com/serializeArray/ ?

Comments

[Николай Громов]

Если бы я разбирался в js так же как и вы то наверно мне этот вариант бы понравился)) Единственное что я помню, так это то что я пытался использовать serializeArray(); но почему то он не захотел работать как надо и пришлось вернуться к getData();

[Николай Громов]

Arik,