如何从数据表中的动态radiobutton获取价值

时间:2018-01-04 01:34:00

标签: javascript jquery get datatables

我想在我的代码中遇到问题后再问一些问题。 所以..首先我在数据表中使用输入radiobutton进行调查是有代码的 的修改



$(document).ready(function() {
     
   $('#example').DataTable({
       "paging": true,
       "searching": false,
       "bInfo": false,
       "bLengthChange": false,
       "pageLength": 2
   });
   
    // $('#save').click(function(){
    //         var radioValue = $(".circle:checked").val();
    //         // if(radioValue){
    //         //     alert("Your are a - " + radioValue);
    //         // }
    //         console.log(radioValue)
    //     });
        

   
$('#save').click(function() {
    var the_value;
    //the_value = jQuery('input:radio:checked').val();
    //the_value = jQuery('input[name=macro]:radio:checked').val();
    the_value = getChecklistItems();
    alert(the_value);
});

function getChecklistItems() {
    var result = 
       $("tr.checklisttr > td > input:radio:checked").get();

        console.log(result)
    
    var columns = $.map(result, function(element) {
        return $(element).attr("id");
    });

    return columns.join("|");
}
} );

<!DOCTYPE html>
<html>

  <head>
    <link data-require="datatables@1.10.12" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script data-require="datatables@1.10.12" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
  <style> 
    .circle{
        color:blue;
    }
  </style>
   
    <form action="" name="quiz" id="quiz_form" method="post">
   <table id="example" class="table table-bordered">
    <thead style="font-size:20px">
      <tr>
        <th rowspan="2">Nomor</th>
        <th colspan="4"><center>Test</center></th>
      </tr>
      <tr>
        <th style="display: none;"></th>
         <th style="display: none;"></th>
          <th style="display: none;"></th>

          <th style="display: none;"></th>
      </tr>
    </thead>
    <tbody style="font-size:18px">
          
            <tr class="checklisttr" id="1">
                
                <td align="left" width="40%"><br>
                    <label for="veryiii" style="align:left;">1</label>
                </td>
                
                <td align="center" width="12%">
                    <input type="radio" id="vii1" name="om" value="4.5"  class="circle">Good
                </td>
                
                <td align="center" width="12%">
                    
                    <input type="radio" id="veryiii1" name="om" value="3.0" class="circle"> Noermal
                </td>
                
                <td align="center" width="12%">
                    <input type="radio" id="viv1" name="om" value="1.5"  class="circle">Bad
                </td>
                
                <td align="center" width="12%">
                
                    <input type="radio" id="veryv1" name="om" value="1.0" class="circle">Verry Bad
                </td>
            </tr>
            
            <tr class="checklisttr" id="2">
                
                <td align="left" width="40%">
                    <label for="veryiii" style="align:left;">2</label>
                </td>
      
                <td align="center" width="12%"><br>
                    <input type="radio" id="vii1" name="om1" value="4.5" class="circle">Good
                </td>
                <td align="center" width="12%"><br>
                    <input type="radio" id="veryiii1" name="om1" value="3.0" class="circle">Normal 
                </td>
                
                <td align="center" width="12%"><br>
                    <input type="radio" id="viv1" name="om1" value="1.5" class="circle">Bad
                </td>
                
                <td align="center" width="12%"><br>
                    <input type="radio" id="veryv1" name="om1" value="1.0" class="circle">Very Bad
                </td>
            </tr>
          
              <tr class="checklisttr" id="3">
                
                <td align="left" width="40%">
                    <label for="veryiii" style="align:left;">3</label>
                </td>
  
                <td align="center" width="12%"><br>
                    <input type="radio" id="vii1" name="om2" value="4.5" class="circle">Good
                </td>
                
                <td align="center" width="12%"><br>
                    <input type="radio" id="veryiii1" name="om2" value="3.0" class="circle"> Normal
                </td>
                
                <td align="center" width="12%"><br>
                    <input type="radio" id="viv1" name="om2" value="1.5" class="circle">Bad
                </td>
                
                <td align="center" width="12%"><br>
                    <input type="radio" id="veryv1" name="om2" value="1.0" class="circle">Very Bad
                </td>
            </tr>
  </tbody>
</table>

        <div class="pull-right">
              <button type="submit" id="save" class="btn btn-warning"><i class="icon-pencil5"></i> Done</button>
        </div>
</form>
 
  </body>

</html>
&#13;
&#13;
&#13;

如果你想回答问题并点击完成,为什么answear只显示最后的数据?

我只想获得所有的价值,为什么如果我下一页为answear下一个问题,我提交表格为什么他没有显示所有的价值,那么如何获得所有数据后的所有数据?感谢

0 个答案:

没有答案