Получить значение радио вместе со всеми остальными входами

$('.cinput').each(function(){
console.info($(this).val());
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' name='radiox' class='cinput' value='black' checked>
<input type='radio' name='radiox' class='cinput' value='white'>
<input type='text' class='cinput' value='gold'>
<textarea class='cinput'>silver</textarea>

Я знаю, как получить ценность радио таким образом:

var radio = $("input[type='radio'][name='radiox']:checked").val();

Но есть ли способ получить его вместе со всеми другими входами:

$('.cinput').each(function(){
console.info($(this).val());
});

Мне нужен результат: black gold silver, а не black white gold silver

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
0
74
6
Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

Вы можете сделать это так: если поле ввода, которое зацикливается (через селектор класса), является переключателем и НЕ проверено, вернитесь из цикла без console.infoging.

$(".cinput").each(function() {
  if ($(this).attr("type") === "radio" && !$(this).attr("checked")) return;
  console.info($(this).val());
});
Ответ принят как подходящий

Вы можете просто выбрать типы отдельно, вот так:

$(':text.cinput, textarea.cinput, :radio.cinput:checked').each(function() {
  console.info($(this).val());
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' name='radiox' class='cinput' value='black' checked>
<input type='radio' name='radiox' class='cinput' value='white'>
<input type='text' class='cinput' value='gold'>
<textarea class='cinput'>silver</textarea>

Вы должны поместить свои элементы в форму. Затем вы можете легко получить все значения с помощью HTMLFormElement#elements. Только обязательно дать имя каждому полю.

const form = document.querySelector('form')
const elements = form.elements

const value = {
  radiox: elements.radiox.value,
  color: elements.color.value,
  details: elements.details.value,
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <input type='radio' name='radiox' value='black' checked>
  <input type='radio' name='radiox' value='white'>
  <input type='text' name = "color" value='gold'>
  <textarea name = "details">silver</textarea>
</form>

Тебе даже не нужен урок. Конечно, вы можете оставить его там, если вам это нужно для чего-то еще, но я удалил его, чтобы уменьшить пример.

console.info надо писать один раз.
user7461846 19.09.2018 07:27

Конечно, тогда просто собери это в предмет.

Lazar Ljubenović 19.09.2018 07:28

Другой вариант - переключить filter на cinput теми, которые либо не являются переключателями, либо отмечены (таким образом, исключая непроверенные переключатели):

$('.cinput').filter((_, { type, checked }) => type !== 'radio' || checked).each(function() {
  console.info($(this).val());
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' name='radiox' class='cinput' value='black' checked>
<input type='radio' name='radiox' class='cinput' value='white'>
<input type='text' class='cinput' value='gold'>
<textarea class='cinput'>silver</textarea>

Вы можете сделать что-то вроде этого:

var s = $('.cinput').map(function() {
  if ($(this).is(":checked") || $(this).is(":not([type=radio])")) {
    return $(this).val();
  }
}).get();

Демо

var s = $('.cinput').map(function() {
  if ($(this).is(":checked") || $(this).is(":not([type=radio])")) {
    return $(this).val();
  }
}).get();
console.info(s)
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' name='radiox' class='cinput' value='black' checked>
<input type='radio' name='radiox' class='cinput' value='white'>
<input type='text' class='cinput' value='gold'>
<textarea class='cinput'>silver</textarea>

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

$(document).ready(function () {
  $('.cinput').change(function () {
    console.clear();
    console.info($('input[type = "radio"]:checked').val());
    console.info($('input[type = "text"]').val());
    console.info($('textarea').val());
  });
});  
  
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='radio' name='radiox' class='cinput' value='black' checked>Black
<input type='radio' name='radiox' class='cinput' value='white'>White
<input type='text' class='cinput' value='gold'>
<textarea class='cinput'>silver</textarea>

Другие вопросы по теме