2013-11-10 5 views
4

У меня есть много переключателей, которые захватывают значение из моей базы данных, и если оно установлено на «1», я устанавливаю переключатель.Радиоустановка отключена при втором нажатии

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

$radio1 грейферы данные из базы данных и будет либо 0, 1 или 2

<input value="1" name="radio1" type="radio"<?php if($radio1==1){echo " checked";} ?>> 
<input value="2" name="radio2" type="radio"<?php if($radio1==2){echo " checked";} ?>> 

Ответ Варуна Малхотра слегка модифицирована: Я изменил 2 строк кода, которые работали немного лучше для меня. Но в целом, ответ Варуна был СОВЕРШЕННО!

$('input[type="radio"]').click(function(){ 
    var $radio = $(this); 

    // if this was previously checked 
    if ($radio.data('waschecked') == true) 
    { 
     $radio.prop('checked', false); 
     $radio.data('waschecked', false); 
    } 
    else 
    { 
     $radio.prop('checked', true); 
     $radio.data('waschecked', true); 
    } 

    // remove was checked from other radios 
    $radio.siblings('input[type="radio"]').data('waschecked', false); 
}); 
+1

Это скорее похоже на флажок. – Amber

+0

@Amber Мне нужен переключатель, потому что я не хочу, чтобы пользователь выбирал несколько вариантов. – bryan

+2

Подумайте, добавьте еще одну радиокнопку для «ни одного из вышеперечисленных». – Amber

ответ

8

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

$(function(){ 
    $('input[name="rad"]').click(function(){ 
     var $radio = $(this); 

     // if this was previously checked 
     if ($radio.data('waschecked') == true) 
     { 
      $radio.prop('checked', false); 
      $radio.data('waschecked', false); 
     } 
     else 
      $radio.data('waschecked', true); 

     // remove was checked from other radios 
     $radio.siblings('input[name="rad"]').data('waschecked', false); 
    }); 
}); 

Вам также потребуется добавить этот атрибут первоначально проверил радио разметки

<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" /> 

JSFIDDLE DEMO

UPDATE:

$(function(){ 
     $('input[name="rad"]').click(function(){ 
      var $radio = $(this); 

      // if this was previously checked 
      if ($radio.data('waschecked') == true) 
      { 
       $radio.prop('checked', false); 
       $radio.data('waschecked', false); 
      } 
      else 
       $radio.data('waschecked', true); 

      // remove was checked from other radios 
      $radio.siblings('input[type="radio"]').data('waschecked', false); 
     }); 
    }); 

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

+0

Есть ли причина, по которой мне нужно отслеживать предыдущее состояние? И это действительно хороший пример! Но что, если у меня будет 30 радиогрупп. Должен быть более простой способ вместо наименования всех из них – bryan

+0

Вы можете удалить имя prop для вашего удобства, но у вас должно быть что-то для ссылки на определенный переключатель. Именование переключателя является наиболее распространенным способом. Вам просто нужно указать одно и то же имя. Если вы хотите, у вас могут быть разные идентификаторы для всех, это будет худший случай, я думаю. – softvar

+1

См. Обновленный ответ. – softvar

2

Замените события перед щелчком, когда вы делаете первый щелчок. Вы можете использовать их. Работа со многими радиогруппами и даже если вы проверили радиокнопки.

$("input[type=radio]").each(function() { 
    var secondClick = true; 
    $(this).change(function() { 
     secondClick = false; 
    }); 
    $(this).click(function() { 
     if (secondClick) { 
      $(this).prop("checked", false); 
     } 
     secondClick = true; 
    }); 
}); 

JSFIDDLE DEMO

+0

Не работает в Chrome 60.0.3112.113. – reformed

0
$("input[type=radio]").on('click', function() { 
    if ($(this).is(':checked')) { 
     $(this).prop("checked", false); 
    } else { 
     $(this).prop("checked", true); 
    } 
}); 
1

Это должно работать в более общем плане, чем другие решения, как она обрабатывает случаи, когда все радиостанции не находятся в одной и той же материнской компании.

var $radios = $('input[type="radio"]'); 
$radios.click(function() { 
    var $this = $(this); 
    if ($this.data('checked')) { 
    this.checked = false; 
    } 
    var $otherRadios = $radios.not($this).filter('[name="' 
               + $this.attr('name') + '"]'); 
    $otherRadios.prop('checked', false).data('checked', false); 
    $this.data('checked', this.checked); 
}); 
+0

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

Смежные вопросы