Question

我在表格的每个条目中都保留了一个单选按钮。我希望用户选择一行，并在提交时将该行发送到服务器。

所以，当我在单选按钮中有行时，我的期望是在给定时间只能选择一个列，但我可以选择所有单选按钮。如何选择并将该行信息作为提交的一部分发送。

<form id="myform1" action="/data" method="post" >     

<table>
 <tr>     

       <td >  <input type="text" id="slno1" size="25" value="10" /> </td>     
       <td >  <input type="text" id="data" size="10" value="this is a test" /> </td>      
       <td >  <input type="radio"  value="" id="editable" /> </td>    
  </tr>
   <tr>     

       <td >  <input type="text" id="slno2" size="25" value="10" /> </td>     
       <td >  <input type="text" id="data1" size="10" value="this is a test1" /> </td>    
       <td >  <input type="radio" value="" id="editable" /> </td>     
  </tr>
  </table>
  <input type="submit" id="mysu1" Value="submits" />  

 </form>

Answer 1

为了能够在多个中选择一个单选按钮，您需要使它们具有相同的名称。而且你也应该检查你的代码，因为你给每个单选按钮两个不同的id属性

Answer 2

好的..首先，您需要为所有输入提供名称...让我们说行标识符......

现在，就jquery而言，您将执行以下操作：

//First we select the form and listen to the submit event
$("#myform1").submit(function(event) {
    //we get which radio button was selected
    var theForm = $(this);
    var theSelectedRadioButton = theForm.find('input[name="row-identifier"]:checked');

    //from here we can get the entire row that this radio button belongs to
    var theSelectedRow = theSelectedRadioButton.parents("tr:first").get(0).outerHTML;

    //now theSelectedRow should have the row html you want... you can send it to the server using an ajax request and voiding this default action of the form "which is redirect to the action page
    $.post("YOUR_SERVER_URL", {
        rowHTML: theSelectedRow
    });
    event.preventDefault();
    return false;
});

有关jquery post方法的更多信息：http://api.jquery.com/jQuery.post/

有关jquery表单提交事件的更多信息，请访问：http://api.jquery.com/submit/

希望这有助于：）

jquery选择表格与表格

2 个答案: