получение значений из объекта и установка флажков состояния

#javascript #jquery #checkbox

#javascript #jquery #флажок

Вопрос:

в приведенном ниже примере мне нужно, чтобы первый флажок был checked , а второй и третий были unchecked

в настоящее время я получаю их все checked

 let data = {"admin":"true","nts":"false","chat":"false"};

$('button').on('click', function(){
    $('.bcheck').each(function(){
            let x = $(this).attr('data-x');
            $(this).attr('checked', data[x]);
        });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='checkbox' class='bcheck' data-x='admin'>
<input type='checkbox' class='bcheck' data-x='nts'>
<input type='checkbox' class='bcheck' data-x='chat'>
<button>CLICK</button>

Ответ №1:

Все ваши значения в data объекте являются строками. Таким образом, все они будут оцениваться true как . Потеряйте строки и сделайте их логическими.

 let data = {
  "admin": true,
  "nts": false,
  "chat": false
};

$('button').on('click', function() {
  $('.bcheck').each(function() {
    let x = $(this).attr('data-x');
    console.log(data[x]);
    $(this).attr('checked', data[x]);
  });
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='checkbox' class='bcheck' data-x='admin'>
<input type='checkbox' class='bcheck' data-x='nts'>
<input type='checkbox' class='bcheck' data-x='chat'>
<button>CLICK</button>

Ответ №2:

Строка "false" не является ложной (попробуйте !!"false" === true в консоли). Можете ли вы изменить строки на обычные логические значения ( false )?

РЕДАКТИРОВАТЬ это должно сделать это:

 let transformedData = {};

const dataEntries = Object.entries(data).map((entry) => {
  return { [entry[0]]: !(entry[1] === "false") };
});

for (const entry of dataEntries) {
  transformedData = { ...transformedData, ...entry };
}

1. на самом деле я получаю data из вызова ajax, поэтому значения заключены в кавычки. Как удалить кавычки из значений в результирующем объекте?

2. вы могли бы написать функцию, которая сопоставляется "false" с false : const convertStringToBool = (value) => !(value === "false") и выполняет цикл Object.values(data) , выполняя convertStringToBool каждое значение. конечно, это работает только в том случае, если вы ожидаете "true" или "false" — вам может потребоваться обработать другие случаи

3. я отредактировал свой ответ, дайте мне знать, если это сработает для вас