JQuery radio button math, возвращает true только после того, как оба радио установлены

Я новичок в Javascript и jQuery.

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

Пример:

if (radio1 is checked && radio2 !is checked OR radio2 is checked && radio1 !is checked)
then return false

Я понятия не имею, как это сделать, поэтому надеюсь, что кто-нибудь сможет мне помочь.

С уважением

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

— 04.12.2018 09:34

То же замечание, что и Закария. Что вы хотите, если оба не отмечены?

— 04.12.2018 09:35

javascript jquery html

04.12.2018 09:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Прежде всего, радиокнопки хороши для одиночного выбора, для множественного выбора используйте флажки. Об этом читайте здесь.

В любом случае, я обновил скрипку, чтобы она работала: http://jsfiddle.net/yeb16hv5/1/

Ваш код был немного беспорядочным, поэтому я почистил его для вас, но вы были на правильном пути:

$(document).ready(function() {
    $('#radiobtn1, #radiobtn2').on("click", () => {

        let radio1_state = $("[name='radio1']").prop("checked");
        let radio2_state = $("[name='radio2']").prop("checked");

    if ( (radio1_state && !radio2_state) || (radio2_state && !radio1_state) ) {
        alert("only one checked");
    }
})});

04.12.2018 09:33

Ответ принят как подходящий

Использование .length упростит проверку проверенных входов независимо от того, что вы используете radio или checkbox.

$(document).ready(function() {
  $('#radiobtn1, #radiobtn2').on("click", () => {
    if ($('input:radio[name^ = "radio"]:checked').length == 1)
    {
      alert("Only one is selected!");
    }
    else if ($('input:radio[name^ = "radio"]:checked').length == 2)
    {
      alert("All of them, is selected!");
    }
    else
    {
      alert('Nothing Selected');
    }
  });
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

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

  <input type = "radio" name = "radio1" value = "1">
  <button id = "radiobtn1">
  Save radio 1
  </button>
  
  <input type = "radio" name = "radio2" value = "2">
  <button id = "radiobtn2">
  Save radio 2
  </button>

для более подробного объяснения

input:radio[name^ = "radio"]:checked .. выберите отмеченные радиовходы с именем ^, начинающимся с radio

input:radio выберите Радио всех типов ввода

[name^ = "radio"] с именем ^ начинается с радио

:checked и проверил

04.12.2018 09:38

Вы также можете установить несколько условий

$(document).ready(function() {
    $('#radiobtn1, #radiobtn2').on("click", () => {
        



if ($('input:radio[name = "radio1"]').is(':checked') && !$('input:radio[name = "radio2"]').is(':checked') )
        {
        alert("Only one is selected!");
         }
         else if (!$('input:radio[name = "radio1"]').is(':checked') && $('input:radio[name = "radio2"]').is(':checked') )
         {
         alert("Only one is selected!");
         }
         else if ($('input:radio[name = "radio1"]').is(':checked') && $('input:radio[name = "radio2"]').is(':checked') )
         {
         alert("All of them, is selected!");
         }
         else{
         alert("No one is selected!");
         }
})});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<input type = "radio" name = "radio1" value = "1">
  <button id = "radiobtn1">
  Save radio 1
  </button>
  
  <input type = "radio" name = "radio2" value = "2">
  <button id = "radiobtn2">
  Save radio 2
  </button>

04.12.2018 09:39

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

JSF inputHidden, как их отключить динамически?

Почему я получаю сообщение "Причина: заголовок CORS" Access-Control-Allow-Origin "отсутствует, хотя данные были успешно возвращены

Фильтрация данных в таблицах данных с несколькими флажками (на стороне сервера)

.html () не отображает поля

Сделайте что-нибудь, когда событие не установлено в jquery

Как реализовать повторяющееся событие со значением true для всего дня?

Как передать переменную javascript в сервлет java doPost

Как получить правильную длину массива в JQuery

Как добавить сгенерированный javascript файл в fileupload?

При щелчке активной вкладки начальной загрузки изменяется положение scrollTop

JQuery radio button math, возвращает true только после того, как оба радио установлены

Ответы 3

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

Похожие вопросы