2015-12-08 4 views
0

У меня есть форма с некоторыми переключателями и флажками. У некоторых флажков/радио есть некоторые скрытые разделители рядом с ними. Скрытые разделители должны появляться только тогда, когда пользователь выбирает соответствующий радио/флажок.Как показать скрытое поле, когда установлен флажок или переключатели?

Каждого радио/Флажок имеет значение в этом формате 123:456 соответствующие скрытый делитель будет иметь id атрибут равен group_123_456

Я могу найти значение делителя идентификаторов, что я должна видимый/скрыть от значения каждого элемента (флажок или радио.)

Я думал, что смогу найти способ, используя событие change(). Я думал, что могу оценить каждый предмет. Если элемент проверен, отобразите соответствующий div, иначе скройте его.

Вот что я сделал

$("input[type='radio'], input[type='checkbox']").change(function(e) { 
    $(this).each(function(index, item){ 
     var newGroupName = ''; 
     if($(item).is(':checked')){ 
      console.log($(item).val() + ' is checked'); 
      newGroupName = getGroupElement($(this).val()); 
      $('#' + newGroupName).show(); 
     } else { 
      console.log($(item).val() + ' is NOT checked'); 
      newGroupName = getGroupElement($(this).val()); 
      $('#' + newGroupName).hide(); 
     } 
    }); 
}).change(); 

Приведенный выше код работает для галочки, но он не работает для радио-кнопок.

создать скрипку, чтобы дать вам хорошее представление о том, что я пытаюсь сделать здесь https://jsfiddle.net/oke8qLwg/2/

Как я могу показать/скрыть правильный делитель каждый раз использование изменить значение на вход в?

https://jsfiddle.net/oke8qLwg/

+0

Здесь может быть ответ для вас ... http://stackoverflow.com/questions/5176803/jquery-radiobutton-change-not-firing-during-de-selection – Beengie

+0

@Beengie благодарит вас за этот намек. это не так, как связать изменение на всех переключателях независимо от имени '$ (" input [type = 'radio'], input [type = 'checkbox'] "). change (function (e) { '? –

+0

да, но я вижу проблему с вашим кодом ... end .change() не обязательно должен быть там, так как вы используете .change как вызов функции. Удалите конец и запустите его в браузер и посмотрите на консоль. Вы должны получить сообщение об ошибке, если синтаксис неверен. – Beengie

ответ

0

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

$(":radio").change(function(e) { 

     var name = $(this).attr('name'); 

     $('input[name='+name+']').each(function(index, item){ 
      applyLogic(item); 
     }); 
}); 

$(":checkbox").change(function(e) { 
     applyLogic($(this)); 
}); 


function applyLogic(item) 
{ 

    var newGroupName = getGroupElement($(item).val()); 

    if($(item).is(':checked')){ 

     $('#' + newGroupName).show(); 

    } else { 

     $('#' + newGroupName).hide(); 
    } 

} 

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

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