Arhn - архитектура программирования

jQuery возвращает флажки как все отмеченные, даже если отмечен только один

Согласно этому JSFIDDLE --

Я сходил с ума, пытаясь понять это последние 48 часов. Все работает, кроме галочки. Я включил изолированный фрагмент кода, который вызывает проблему.

После того, как я создал поля (нажав кнопку флажка) и завершил форму, мне удалось увидеть code и я смог сериализовать флажки в JSON, но в итоге я получил «включено» для всех флажков, даже если только один из них отмечен .

Когда я установил только один (первый флажок) и другие флажки не отмечены и нажал «сохранить», я получаю это в результате:

{"ck1":"on","ck2":"on","ck3":"on","submit1":"save"}

Что испортило результат? Я делаю что-то не так в этом коде?

Буду признателен за помощь в выявлении проблемы.
Моя цель — увидеть JSON в этом формате, когда у меня установлен первый флажок:

{"ck1":"on","submit1":"save"} или любой формат, который вы бы предложили.

ОТРЕДАКТИРОВАНО:

Найдите ниже функцию, которую я назначил для отправки события:

 $('#form'+formnum).submit( function(e) {
e.preventDefault(e);
var data = {};

//Gathering the Data
$.each(this.elements, function(i, v){
        var input = $(v);
        data[input.attr("id")] = input.val();
 //delete data[button.attr("id")]; <-- cant' figure it out
//removeData[submit] <-- cant' figure it out
}); // end of $.each

var output =JSON.stringify(data);
$('#showurl').text(output);
}); //end of 'save' button function

JSFIDDLE: jsfiddle.

javascript json checkbox html jquery
30.01.2014

  • Даже если вы предоставляете скрипт, вы должны опубликовать соответствующий код в самом вопросе. Вопросы и ответы только по ссылкам не соответствуют правилам сайта, потому что становятся бесполезными, если ссылка не работает. 30.01.2014
  • Вы хотите это: jsfiddle.net/aamir/AJwXV/3? 30.01.2014
  • В вашем флажке отсутствует идентификатор. 30.01.2014
  • данные [input.attr (идентификатор) || input.attr(name)] должен исправить это 30.01.2014
  • @ ÁlvaroG.Vicario - спасибо за указатель. Отредактировано. 30.01.2014
  • Я бы предложил использовать serialize или serializeArray, которые автоматически решат эту проблему за вас. 30.01.2014
  • Если вам нужно создать все с помощью JS, попробуйте jsfiddle.net/aamir/AJwXV/6 30.01.2014

Ответы:


1

Вы получаете значение из флажков, и значение всегда одинаково, независимо от состояния флажка.

Проверьте тип элемента, чтобы получить состояние флажков:

if (input.is(':checkbox')) {
  if (input.is(':checked')) {
    data[input.attr("id")] = input.val();
  }
} else {
  data[input.attr("id")] = input.val();
}

Если вам нужны данные только из флажков, вы можете просто отфильтровать отмеченные флажки с самого начала:

$(':checked', this).each(function(i, v){ data[v.id] = v.value; });
30.01.2014
  • Зачем делать :checked проверял дважды. Также у него нет идентификаторов на флажках. .attr('name') должен работать. 30.01.2014
  • @AamirAfridi: Где вы видите, что :checked проверяется дважды? Если вы посмотрите еще раз, то увидите, что на самом деле у флажков есть идентификатор, но нет имени, поэтому attr("id") работает, а attr("name") — нет. 30.01.2014
  • @AamirAfridi: проверка :checkbox должна определить, является ли это флажком или нет, а проверка :checked должна определить, установлен он или нет. Если бы вы сделали только одну проверку, вы бы обработали неотмеченные флажки как другие элементы, и они все равно оказались бы в объекте данных. Поскольку код должен обрабатывать больше, чем просто флажки, необходимы обе проверки. 30.01.2014
  • если вы это сделаете is(':checked'), этого должно быть достаточно :) также в его первой версии jsfiddle. net/farondomenic/AJwXV/1 у него есть имя и jsfiddle.net/farondomenic/AJwXV/ 2 имеет идентификатор для каждого флажка 30.01.2014
  • @AamirAfridi: этого достаточно, если вы хотите только проверить, установлен ли флажок, но он не может обрабатывать какие-либо другие элементы. Что касается скрипок, да, я понимаю, что вы смотрели на более старую версию, когда писали комментарий. 30.01.2014
  • Посмотрите jsfiddle.net/aamir/AJwXV/9, чтобы вам не пришлось переберите все элементы и убедитесь, что перед проверкой is.(':checked') каждого элемента элемент должен быть флажком. Не уверен, что именно он задает, но я уверен, что ему не нужно значение кнопок в JSON. Все, что ему нужно, это список отмеченных флажков. 30.01.2014
  • @AamirAfridi: в примере вопроса включена кнопка отправки. Некоторый серверный код использует значение кнопки, чтобы определить, почему приходит запрос, в этом случае он должен быть включен для работы серверного кода. 30.01.2014
  • В таком случае, да, вы правы, но все же вам может просто понравиться. проверьте jsfiddle.net/aamir/N2P2c и jsfiddle.net/aamir/N2P2c/1 :P 31.01.2014
  • Очень впечатляет, @Guffa. +1 - ты очень хорошо читаешь между строк. Да, это моя цель включить отправку и ее значение. По сути, как программист на стороне сервера, я хочу, чтобы мои серверы точно знали, откуда все $.post() или $.ajax() пришли как часть процесса тюрьмы, прежде чем принимать значения для входа на мой сервер для хранения базы данных. 01.02.2014

    • 2

    Вы произвольно присваиваете значение всем входам, на самом деле вы не проверяете состояние checked.

    Добавьте условную строку для:

    data[input.attr("id")] = input.val();

    Что-то типа:

    if (/* (input is a checkbox and checkbox is checked) or input is not a checkbox*/) {
        data[input.attr("id")] = input.val();
}

    Вам также нужно исключение для переключателей.

    30.01.2014
  • радиочасть у меня работает и проблем не было. См. эту скрипту: jsfiddle.net/farondomenic/JF3Qv 30.01.2014
  • Нет, на самом деле это не так, у него точно такая же проблема. Если вы не отметите ни один из переключателей, они будут отображаться со своим значением. Если вы создаете группу, значением будет последний переключатель, даже если он не выбран. 30.01.2014
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..