具有多个输入并选择多个选项的动态表

时间:2018-11-29 07:23:17

标签: dom laravel-5.6

我单选按钮有问题,复选框正常工作,但单选按钮有问题。我想选择第一个问题以及下一个问题的答案。

波纹管是我的addcontent.blade.php

else if(type==='quiz'){

     append_type=  '<div class="form-group">'+
             '<label class="control-label col-md-4 col-sm-4 col-xs-12">Content Title:</label>'+
             '<div class="col-md-8 col-sm-8 col-xs-12">'+
             '<input class="form-control" type="text" placeholder="Content Title" name="c_title">'+
                '</div>'+
                '</div>'+
              '<div class="form-group">'+
                '<label class="control-label col-md-4 col-sm-4'+
                    'col-xs-12">Question:</label>'+
                      '<div class="col-md-8 col-sm-8 col-xs-12">'+
                      '<input class="form-control" type="text" placeholder="Question"'+
                       'name="question">'+
                      '</div>'+
                    '</div>'+
                    '<h3 align="center"> PLEASE ADD THE ANSWER  HERE</h3>'+ 
                    '<div class="form-group">'+
                     '<div class="col-sm-2">'+
                      '<input type="hidden" name="correct[]" value="1"  id="correct_1"/>'+
                      '<div class="radio" >'+
                  '<label><input type="radio" name="optradio"  value="1" id="option_1" checked>'+
                  'Correct?</label>'+
                     '</div>'+
                    '</div>'+           
                      '<div class="col-md-8 col-sm-8 col-xs-12">'+

                   '<input class="form-control" type="text" placeholder=" Type the Answer"'+
                   'name="answer[]">'+
                      '</div>'+
                      '</div> '+
                     '<div class="form-group">'+
                     '<div class="col-sm-2">'+
                     '<input type="hidden" name="correct[]" value="0" id="correct_2"/>'+
                   '<div class="radio">'+
             '<label><input type="radio" name="optradio" value="2" id="option_2">Correct?</label>'+
                     '</div>'+
                    '</div>'+          
                      '<div class="col-md-8 col-sm-8 col-xs-12">'+   
                        '<input class="form-control" type="text" placeholder="'+
                         'Type the Answer" name="answer[]">'+
                      '</div>'+
                    '</div>'+ 
                    '<div class="form-group">'+
                     '<div class="col-sm-2">'+
                      '<input type="hidden" name="correct[]" value="0" id="correct_3"/>'+
                        '<div class="radio">'+
                   '<label><input type="radio" name="optradio" value="3" id="option_3">'+
                   'Correct?</label>'+
                     '</div>'+
                    '</div>'+
                      '<div class="col-md-8 col-sm-8 col-xs-12">'+
                        '<input class="form-control" type="text" placeholder="'+ 
                        'Type the Answer" name="answer[]">'+
                      '</div>'+
                    '</div>'+ 
                    '<div class="form-group">'+ 
                      '<div class="col-sm-2">'+
                      '<input type="hidden" name="correct[]" value="0" id="correct_4"/>'+
                      '<div class="radio">'+ 
                   '<label><input type="radio" name="optradio" value="4" id="option_4">'+
                   'Correct?</label>'+
                     '</div>'+
                      '</div>'+
                      '<div class="col-md-8 col-sm-8 col-xs-12">'+
                        '<input class="form-control" type="text" placeholder="'+
                         'Type the Answer" name="answer[]">'+
                            '<button type="button" name="add" id="add" class="btn btn-success"'+
                       'style="margin-top:5px;">'+
                      'Add More</button></td>'+   
                      '</div>'+
                    '</div>'; 
                     $('#default_type_form').html(append_type);

            var html='<div class="append_quiz"><div class="form-group">'+
                      '<label class="control-label col-md-4 col-sm-4 col-xs-12">Content Title:</label>'+
                      '<div class="col-md-8 col-sm-8 col-xs-12">'+
                   '<input class="form-control" type="text" placeholder="Content Title" name="c_title">'+
                      '</div>'+
                    '</div>'+
                    '<div class="form-group">'+
                   '<label class="control-label col-md-4 col-sm-4'+
                    'col-xs-12">Question:</label>'+
                      '<div class="col-md-8 col-sm-8 col-xs-12">'+
                      '<input class="form-control" type="text" placeholder="Question"'+
                       'name="question">'+
                      '</div>'+
                    '</div>'+
                    '<h3 align="center"> PLEASE ADD THE ANSWER  HERE</h3>'+ 
                    '<div class="form-group">'+
                     '<div class="col-sm-2">'+
                      '<input type="hidden" name="correct[]" value="1"  id="correct_1"/>'+
                      '<div class="radio" >'+
                  '<label><input type="radio" name="optradio"  value="1" id="option_1" checked>'+
                  'Correct?</label>'+
                     '</div>'+
                    '</div>'+           
                      '<div class="col-md-8 col-sm-8 col-xs-12">'+

                   '<input class="form-control" type="text" placeholder=" Type the Answer"'+
                   'name="answer[]">'+
                      '</div>'+
                      '</div> '+
                     '<div class="form-group">'+
                     '<div class="col-sm-2">'+
                     '<input type="hidden" name="correct[]" value="0" id="correct_2"/>'+
                   '<div class="radio">'+
             '<label><input type="radio" name="optradio" value="2" id="option_2">Correct?</label>'+
                     '</div>'+
                    '</div>'+          
                      '<div class="col-md-8 col-sm-8 col-xs-12">'+   
                        '<input class="form-control" type="text" placeholder="'+
                         'Type the Answer" name="answer[]">'+
                      '</div>'+
                    '</div>'+ 
                    '<div class="form-group">'+
                     '<div class="col-sm-2">'+
                      '<input type="hidden" name="correct[]" value="0" id="correct_3"/>'+
                        '<div class="radio">'+
                   '<label><input type="radio" name="optradio" value="3" id="option_3">'+
                   'Correct?</label>'+
                     '</div>'+
                    '</div>'+
                      '<div class="col-md-8 col-sm-8 col-xs-12">'+
                        '<input class="form-control" type="text" placeholder="'+ 
                        'Type the Answer" name="answer[]">'+
                      '</div>'+
                    '</div>'+ 
                    '<div class="form-group">'+ 
                      '<div class="col-sm-2">'+
                      '<input type="hidden" name="correct[]" value="0" id="correct_4"/>'+
                      '<div class="radio">'+ 
                   '<label><input type="radio" name="optradio" value="4" id="option_4">'+
                   'Correct?</label>'+
                     '</div>'+
                      '</div>'+
                      '<div class="col-md-8 col-sm-8 col-xs-12">'+
                        '<input class="form-control" type="text" placeholder="'+
                         'Type the Answer" name="answer[]">'+
                   '<button type="button" class="btn btn-danger remove_quiz" style="margin-top:5px;">'+
                      'X</button></td></div>';

      $('#add').click(function(e){
      $('#default_type_form').append(html);
      quiz_i++;
         //remove rows from the form
      $(".remove_quiz").on('click',function(){
      $(this).closest('div .append_quiz').fadeOut(function(){
      $(this).remove();
      });
         quiz_i--;
      });

      });
               var $radios = $('input[name="optradio"]');
                $radios.change(function(){

                  if($(this).val()==1){

                      $('#correct_1').val();
                       $('#correct_2').val(0);
                        $('#correct_3').val(0);
                         $('#correct_4').val(0);
                  }
                  else if($(this).val()==2){
                    $('#correct_2').val(1);
                     $('#correct_1').val(0);
                        $('#correct_3').val(0);
                         $('#correct_4').val(0);
                  } 
                    else if($(this).val()==3){
                    $('#correct_3').val(1);
                     $('#correct_1').val(0);
                      $('#correct_2').val(0);
                       $('#correct_4').val(0);
                  }
                 else if($(this).val()==4){
                    $('#correct_4').val(1);
                     $('#correct_2').val(0);
                      $('#correct_3').val(0);
                      $('#correct_1').val(0);
                  }


           console.dir($radios);

     });


      }

    });


  });
</script> 

这是表格 As you can see in the screenshot如果我想以第一种形式进行选择,那么如果我以第二种形式进行选择,则第二个选择的输入字段将进入第一个,而第一种形式则保持未选择状态。请有人帮助我,这样我就可以在第一个表格中选择第二个表格....提前谢谢

0 个答案:

没有答案