отображать предупреждение и флажок в зависимости от значения переключателя - PullRequest
Новая
       40

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

0 голосов
/ 07 марта 2012 
<input type="radio" id="incomplete" name="app_status" value="incomplete">Incomplete Application<br>
<input type="radio" id="complete" name="app_status" value="complete">Complete Application<br><br>
<div id="app_box">      
   <input type="checkbox" name="application_complete"  value="checked" />Checbox policy

<br><br>
</div>

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

Если пользователь щелкает по полному блоку радио, на нем должно отображаться поле 'application_complete', иначе скрыть его.

Вот то, что я пытаюсь реализовать в моей функции jquery, возможно, моя концепция немного ошибочна: 

<script type="text/javascript">
$(function(){
    $("#app_box").hide("fast");
    if($("#complete").is(':checked')){
        $("#app_box").show("fast");
    }
    elseif($("#incomplete").is(':checked')){
        alert("Application will be incomplete");
        $("#app_box").hide("fast");
    }
});
</script>

Спасибо, ребята .. Мне нужно немного изменить код, предложенный JREAM. Если я установлю флажок application_complete, а затем нажму на незавершенный переключатель, могу ли я снова снять флажок application_complete?

Неважно. я понял это. 

$('input[name=application_complete]').attr('checked',false);

Ответы [ 5 ]

2 голосов
/ 07 марта 2012

Вам нужно обработать событие щелчка на радио: 

$(function(){
     var $app_box = $("#app_box").hide("fast");

     $(':radio[name="app_status"]').click(function() {
        if (this.value === "complete")
            $app_box.show("fast");
        else if (this.value === "incomplete") {
            alert("Application will be incomplete");
            $app_box.hide("fast");
        }
     });
});
2 голосов
/ 07 марта 2012

Вы можете сделать это, проверив событие change() и сравнив значение флажка: 

$(function(){
  $("#app_box").hide("fast");
  $('[name="app_status"]').change(function(){
    if (this.value == 'complete') {
      alert('complete');
    } else {
      alert('incomplete');
    }
  });
});​

Я создал скрипку здесь для демонстрации.

2 голосов
/ 07 марта 2012

У вас есть две проблемы:

1: у вас нет обработчика событий, поэтому он проверяет ваши формы только при загрузке вашей страницы (и у них нет выбора, с которого можно начинать)

2: Вы сделали «elseif», но в JS его два слова, так что ваш JavaScript сломался, выполните «else if», вот решение: 

<script type="text/javascript">
$(function(){
    $("#app_box").hide();

    $('input[name=app_status]').change(function() {
      var value = $(this).val();
      if (value == 'incomplete') {
        alert('error msg');
      } else if (value =='complete') {
        $('#app_box').show();
    }
});

});
</script>
0 голосов
/ 07 марта 2012

Вероятно, для этого лучше использовать пользовательский интерфейс jQuery, особенно модальное поле: http://jqueryui.com/demos/dialog/#modal-message

0 голосов
/ 07 марта 2012

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

...