2014-12-15 22 views
7

Tôi có bảng câu hỏi này mà tôi sử dụng để bắt đầu một ứng dụng. Tôi đang sử dụng javascript để xác nhận trước khi tôi gửi nó, nhưng tôi đang chạy vào một vấn đề mà nó chỉ xác nhận nút thứ hai trên mỗi câu hỏi và không xác nhận riêng từng câu hỏi. Tôi đã đăng mã dưới đây.Các nút radio không xác nhận chính xác

Questionnaire

<? 
    for($i = 1; $i <= count($questions); $i++){ 
     print "<div class='form-group'>"; 
      print "<div class='col-md-12'>"; 
       print "<p>$i) ".$questions[$i-1]."</p>"; 
       print "<label class='radio-inline'>"; 
        print "<input type='radio' name='q$i' value='1'>Yes"; 
       print "</label>"; 
       print "<label class='radio-inline'>"; 
        print "<input type='radio' name='q$i' value='-1'>No"; 
       print "</label>"; 
      print "</div>"; 
     print "</div>"; 
    } 
?> 

Javascript

$(function(){ 
    $('#questionaire-form').submit(function(e){ 
     e.preventDefault(); 
     var prevname = ""; 
     var questions = []; 
     $('.radio-inline').each(function(){ 
      //$(this).next($(this)).is(':checked'));    
      var curname = $(this).find('input[type="radio"]').attr('name'); 
      if(prevname == curname){ 
       if(!$(this).find('input[name='+curname+']').is(':checked') && $(this).closest('div').find('p').hasClass('text-danger')){ 
        return true; //skip to the next element 
       }else if(!$(this).find('input[name='+curname+']').is(':checked') && !$(this).closest('div').find('p').hasClass('text-danger')){ 
        $(this).closest('div').find('p').addClass('text-danger'); 
       }else if($(this).find('input[name='+curname+']').is(':checked') && $(this).closest('div').find('p').hasClass('text-danger')){ 
        $(this).closest('div').find('p').removeClass('text-danger'); 
       }else{ 
        $(this).closest('div').find('p').removeClass('text-danger'); 
       } 
      } 
      prevname = curname; 
     }); 
     var go; 
     $('.radio-inline').closest('div').find('p').each(function(){ 
      if($(this).hasClass('text-danger')){ 
       go = false; 
       return false; 
      }else{ 
       go = true; 
      } 
     }); 
     if(go){ 

     } 
    }); 
}); 

Xin hỏi để biết thêm thông tin nếu cần thiết. Tôi đã bị mắc kẹt trong chuyện này một thời gian, và tôi muốn giải quyết nó một cách nhanh chóng. nút radio xác nhận luôn luôn là điểm yếu của tôi, vì vậy chinh phục mà ngày hôm nay sẽ là tuyệt vời

+1

Là một sidenote: bạn thực sự nên xem xét các cơ chế tạo khuôn mẫu để tách chế độ xem của bạn khỏi logic khác của bạn. –

+0

bạn có thể đi sâu hơn một chút về ý của bạn không? Tôi tò mò –

+1

Chính xác thì bạn đang cố gắng xác thực điều gì? Chỉ cần một trong các hộp radio được đánh dấu cho mỗi nhóm? – Snuffleupagus

Trả lời

1

Làm thế nào về điều này:

var go = true; 
$(".form-group").each(function() { 
    if($(this).find('input[type="radio"]:checked').length == 0) { 
     //nothing checked so error. 
     $(this).find('p').addClass('text-danger'); 
     go = false; 
    } 
    else { 
     $(this).find('p').removeClass('text-danger'); 

    } 


}); 
if(!go) 
{return false;} 

//continue and do what you like 

CẬP NHẬT

Tested trong fiddle: http://jsfiddle.net/6k0nusfb/

+0

nope màu đỏ trên đoạn văn chỉ biến mất nếu không có nút được kiểm tra –

+0

Mã của tôi đang làm việc hoàn toàn tốt cho tôi. Tôi đã thêm một câu đố. –

+0

Ah tôi đã tìm ra, tôi đã có thêm một dòng từ mã cũ của tôi không quan trọng xung quanh với mọi thứ. Vì vậy, cách tôi hiểu nó sau đó là miễn là một tập hợp các nút radio chia sẻ cùng một tên, tất cả họ sẽ chia sẻ cùng một tài sản kiểm tra chính xác? –

Các vấn đề liên quan