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

$(document).ready(function() {

  function isEmpty() {
    $('#main_form').find('input[type="radio"]').each(function() {
      var name = $(this).attr("name");
      if ($('input:radio[name="' + name + '"]:checked').val() === 'undefined') {
        $('input:radio[name="' + name + '"]:checked').parents('.form_field').find('.form_label').addClass('not_valid');
      }
    });
  }

  $("a").click(function(e) {
    e.preventDefault();
    isEmpty();
  })
});
.form_label.not_valid {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="main_form">
  <table>
    <tbody>
      <tr class="form_field radio_buttons">
        <th class="form_label">Your product</th>
        <td colspan="5">
          <input type="radio" name="your_product" id="your_product_1" value="Goods">
          <label class="label-style" for="your_product_1">Goods</label>
          <input type="radio" name="your_product" id="your_product_2" value="In-between/both">
          <label class="label-style" for="your_product_2">In-between/both</label>
          <input type="radio" name="your_product" id="your_product_3" value="Services">
          <label class="label-style" for="your_product_3">Services</label>
        </td>
      </tr>
      <tr class="form_field radio_buttons">
        <th class="form_label">Clients</th>
        <td colspan="5">
          <input type="radio" name="clients" id="clients_1" value="Businesses">
          <label class="label-style" for="clients_1">Businesses</label>
          <input type="radio" name="clients" id="clients_2" value="In-between/both">
          <label class="label-style" for="clients_2">In-between/both</label>
          <input type="radio" name="clients" id="clients_3" value="Customers">
          <label class="label-style" for="clients_3">Customers</label>
        </td>
      </tr>
    </tbody>
  </table>
</form>
<a href="#">click</a>

Когда я делаю console.log($('input:radio[name="' + name + '"]:checked').val()), я выхожу, если я проверил кнопку, значение группы (3 раза повторяется) и неопределенным (3 раза), если я ничего не выбираю, я получаю 6 раз неопределенным , Поэтому, если моя логика верна, мои метки должны получить класс not_valid и стать красным. Но я, должно быть, что-то делаю не так, думаю, что-то с условием if. Я просто не могу понять, чего мне здесь не хватает.

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

2
dingo_d 16 Дек 2015 в 12:42

3 ответа

Лучший ответ

По комментариям:

  1. $('input:radio[name="' + name + '"]:checked').val() === 'undefined' должен быть изменен на $('input:radio[name="' + name + '"]').is(':checked') или что-то еще. В настоящее время он будет введен только в том случае, если ваше проверенное радио имеет значение 'undefined'.

  2. Поскольку вы хотите проверить, что для данного имени нет проверенного значения, и изменить класс его родителей, вы должны использовать $('input:radio[name="' + name + '"]') без этого :checked, что делает результат пустым объектом jquery.

Вы также можете сделать все это с помощью toggleClass, демо-версии jsfiddle, используя их, если вы проверите недопустимые группы, вы можете удалить недействительный класс, нажав эту кнопку еще раз.

// Get name
var name = $(this).attr("name");
// Get ref so we don't need to retrieve it twice.
var $targets = $('input:radio[name="' + name + '"]');
//Find their parents, and toggle the class by check if the elements are checked or not.
$targets.parents('.form_field').find('.form_label').toggleClass('not_valid', !$targets.is(':checked'));

Изменен исходный код:

$(document).ready(function() {

  function isEmpty() {
    $('#main_form').find('input[type="radio"]').each(function() {
      var name = $(this).attr("name");
      
      // Check if the there's any radio with given name is checked.
      if (!$('input:radio[name="' + name + '"]').is(':checked')) {
        $('input:radio[name="' + name + '"]').parents('.form_field').find('.form_label').addClass('not_valid');
      }
    });
  }

  $("a").click(function(e) {
    e.preventDefault();
    isEmpty();
  })
});
.form_label.not_valid {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="main_form">
  <table>
    <tbody>
      <tr class="form_field radio_buttons">
        <th class="form_label">Your product</th>
        <td colspan="5">
          <input type="radio" name="your_product" id="your_product_1" value="Goods">
          <label class="label-style" for="your_product_1">Goods</label>
          <input type="radio" name="your_product" id="your_product_2" value="In-between/both">
          <label class="label-style" for="your_product_2">In-between/both</label>
          <input type="radio" name="your_product" id="your_product_3" value="Services">
          <label class="label-style" for="your_product_3">Services</label>
        </td>
      </tr>
      <tr class="form_field radio_buttons">
        <th class="form_label">Clients</th>
        <td colspan="5">
          <input type="radio" name="clients" id="clients_1" value="Businesses">
          <label class="label-style" for="clients_1">Businesses</label>
          <input type="radio" name="clients" id="clients_2" value="In-between/both">
          <label class="label-style" for="clients_2">In-between/both</label>
          <input type="radio" name="clients" id="clients_3" value="Customers">
          <label class="label-style" for="clients_3">Customers</label>
        </td>
      </tr>

    </tbody>
  </table>
</form>
<a href="#">click</a>
1
fuyushimoya 16 Дек 2015 в 10:05
$(document).ready(function() {

      function isEmpty() {
        $('#main_form').find('input[type="radio"]').each(function() {
          var name = $(this).attr("name");

          if ($('input:radio[name="' + name + '"]').is(":not(:checked)")) {

            $('input:radio[name="' + name + '"]').parents('.form_field').find('.form_label').addClass('not_valid');
          }
        });
      }
  $("a").click(function(e) {
  e.preventDefault();
  isEmpty();
  })
});
0
Shailesh Katarmal 16 Дек 2015 в 09:56

Попробуй это:

$(document).ready(function() {

  function isEmpty() {
    $('#main_form').find('input[type="radio"]').each(function() {
      var name = $(this).attr("name");
      console.log(name, $('input:radio[name="' + name + '"]').is(":checked"))
      if (!$('input:radio[name="' + name + '"]').is(":checked")) {
        console.log(name, "Error");
        $('input:radio[name="' + name + '"]').parents('.form_field').find('.form_label').addClass('not_valid');
      }
      else{
        $('input:radio[name="' + name + '"]').parents('.form_field').find('.form_label').removeClass('not_valid');
      }
    });
  }

  $("a").click(function(e) {
    e.preventDefault();
    isEmpty();
  })
});
.not_valid {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="main_form">
  <table>
    <tbody>
      <tr class="form_field radio_buttons">
        <th class="form_label">Your product</th>
        <td colspan="5">
          <input type="radio" name="your_product" id="your_product_1" value="Goods">
          <label class="label-style" for="your_product_1">Goods</label>
          <input type="radio" name="your_product" id="your_product_2" value="In-between/both">
          <label class="label-style" for="your_product_2">In-between/both</label>
          <input type="radio" name="your_product" id="your_product_3" value="Services">
          <label class="label-style" for="your_product_3">Services</label>
        </td>
      </tr>
      <tr class="form_field radio_buttons">
        <th class="form_label">Clients</th>
        <td colspan="5">
          <input type="radio" name="clients" id="clients_1" value="Businesses">
          <label class="label-style" for="clients_1">Businesses</label>
          <input type="radio" name="clients" id="clients_2" value="In-between/both">
          <label class="label-style" for="clients_2">In-between/both</label>
          <input type="radio" name="clients" id="clients_3" value="Customers">
          <label class="label-style" for="clients_3">Customers</label>
        </td>
      </tr>

    </tbody>
  </table>
</form>
<a href="#">click</a>
0
Rajesh 16 Дек 2015 в 09:57