Javascript 在使用按钮提交表单之前，如何检查单选按钮？

我有一张表格，表格上的每一行都有不同的报价。因此，我在每行中都有一些按钮，用于下载报价文档或删除报价。按钮提交表单，然后转到执行所需操作的另一个php文件

我的问题是，在提交表单之前，必须检查所需行的单选按钮。javascript有没有办法在您单击这两个按钮中的一个时，首先自动选择该行的单选按钮，然后提交表单

<form class="filterSelection" action="../php/editOffer/getInfo.php" method="POST">
    <table class="accountsTable">
        <thead>
            <tr>
                <th>Selected</th>
                <th>Project ID</th>
                <th>Revision</th>
                <th>Project Description</th>
                <th>Customer</th>
                <th>Date</th>
                <th>Creator</th>
                <th>Documentation</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="radio" name="selectedOffer" id="selectedOffer" required="" value="1-1"></td>
                <td>1</td>
                <td>1</td>
                <td>Test</td>
                <td>Info</td>
                <td>2020-02-10</td>
                <td>Name</td>
                <td>
                    <button type="submit" class="download" name="action" value="Download"><i class="fa fa-download" aria-hidden="true"></i></button>
                </td>
                <td>
                    <button type="submit" class="delete" name="action" value="Delete" onclick="return confirm('Do you want to delete the selected offer? This action can´t be undone')">
                        <i class="far fa-trash-alt"></i>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
    <br>
    <button name="action" class="nextButton" type="submit" value="Next"><i class="fas fa-arrow-alt-circle-right fa-2x"></i></button>
</form>

挑选出来的
项目ID
修订
项目说明
顾客
日期
造物主
文档
删除
1.
1.
试验
信息
2020-02-10
名称

将单击事件添加到按钮

---

您需要在表单中做一些小更改，如下所示：

<form class="filterSelection" id="filter-form" action="../php/editOffer/getInfo.php" method="POST">
    <table class="accountsTable">
        <thead>
            <tr>
                <th>Selected</th>
                <th>Project ID</th>
                <th>Revision</th>
                <th>Project Description</th>
                <th>Customer</th>
                <th>Date</th>
                <th>Creator</th>
                <th>Documentation</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="radio" name="selectedOffer" id="selectedOffer-1" value="1-1"></td>
                <td>1</td>
                <td>1</td>
                <td>Test</td>
                <td>Info</td>
                <td>2020-02-10</td>
                <td>Name</td>
                <td><button type="button" name="action" data-row="1" onclick="btnAction(this)" value="Download"><i
                            class="fa fa-download" data-row="1" aria-hidden="true"></i> Download</button>
                </td>
                <td><button type="button" name="action" onclick="btnAction(this)" value="Delete">
                        <i class="far fa-trash-alt"></i> Delete</button></td>
            </tr>
        </tbody>
    </table><br>
    <button name="submit" class="nextButton" type="button" value="Next"><i
            class="fas fa-arrow-alt-circle-right fa-2x"></i> Next</button>
</form>

挑选出来的
项目ID
修订
项目说明
顾客
日期
造物主
文档
删除
1.
1.
试验
信息
2020-02-10
名称
下载
删除


下一个

下面是检查验证的javascript代码：

<script>
    function btnAction(btn) {
        var row = btn.dataset.row;
        var radio = document.getElementById("selectedOffer-"+row);
        radio.checked = true;
        document.getElementById("filter-form").submit();
    }
</script>

功能btn操作（btn）{
var row=btn.dataset.row；
var radio=document.getElementById（“selectedOffer-”+行）；
radio.checked=true；
document.getElementById（“筛选表单”）.submit（）；
}

---

希望这对您有用解决方案

您可以针对最近的tr找到特定的单选按钮。然后使用

setAttribute（）

设置选中的属性

您可以尝试以下方法：

var buttons=document.querySelectorAll（'button[type=submit'）；
按钮。forEach（功能（btn）{
btn.addEventListener（'click'，函数（el，e）{
this.closest（'tr'）.querySelector（'[type=radio]'）.setAttribute（'checked'，'checked'）；
警报（this.closest（'tr'）.querySelector（'[type=radio]'））.getAttribute（'checked'）；
});
})

挑选出来的
项目ID
修订
项目说明
顾客
日期
造物主
文档
删除
1.
1.
试验
信息
2020-02-10
名称
1.
1.
试验
信息
2020-02-10
名称

最后，我解决了添加隐藏输入和删除单选按钮的问题。我还更改了表单的结构。现在，这是我的代码：

<table class = "accountsTable">
            <thead>
                <tr>
                    <th>Project ID</th>
                    <th>Revision</th>
                    <th>Project Description</th>
                    <th>Customer</th>
                    <th>Date</th>
                    <th>Creator</th>
                    <th>Download</th>
                    <th>Delete</th>
                    <th>Edit</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                    <form class="filterSelection" action="../php/editOffer/getInfo.php" method="POST">
                        <td>1</td>
                        <td>1</td>
                        <td>Test</td>
                        <td>Info</td>
                        <td>2020-02-10</td>
                        <td>Name</td>
                        <td><button type="submit" class="download" name="action" value="Download"><i class="fa fa-download" aria-hidden="true"></i></button>
                            </td>
                        <td><button type="submit" class="delete" name="action" value="Delete" 
                                    onclick="return confirm('Do you want to delete the selected offer? This action can´t be undone')">
                                <i class="far fa-trash-alt"></i></button></td>
                        <td><button name="action" class="edit" type="submit" value="Next"><i class="fas fa-edit"></i></button></td>
                        <input type="hidden" name="selectedOffer" value="1-1"/>
                    </form>
                </tr>
                                        <tr>
                    <form class="filterSelection" action="../php/editOffer/getInfo.php" method="POST">
                        <td>1</td>
                        <td>2</td>
                        <td>Demo</td>
                        <td>Info1</td>
                        <td>2020-02-13</td>
                        <td>Name1</td>
                        <td></td>
                        <td><button type="submit" class="delete" name="action" value="Delete" 
                                    onclick="return confirm('Do you want to delete the selected offer? This action can´t be undone')">
                                <i class="far fa-trash-alt"></i></button></td>
                        <td><button name="action" class="edit" type="submit" value="Next"><i class="fas fa-edit"></i></button></td>
                        <input type="hidden" name="selectedOffer" value="1-2"/>
                    </form>
                </tr>

项目ID
修订
项目说明
顾客
日期
造物主
下载
删除
编辑
1.
1.
试验
信息
2020-02-10
名称
1.
2.
演示
信息1
2020-02-13
名称1

当然有。您尝试过什么？只是在每行上都有单选按钮，然后在底部有一个单独的下载/删除按钮，对单选按钮中选择的项目起作用，这不是更有意义吗？或者，或者完全取消单选按钮，在行中有单独的表单，其中有一个隐藏字段记录sel节。现在您似乎将两个不同的UI模式混为一谈。@ADyson，因为我需要提交单选按钮的值。抱歉，但我是新手，我可以用隐藏字段来实现吗？如果可能，它是如何工作的？抱歉，不确定您要回复哪些注释。我添加了几个，但我想都是这些注释被删除，只是添加了一个简单得多的注释。正如我在上面剩下的一个注释中所指出的，通常有两种方法可以实现这种设计。一种方法保留单选选项，但减少了按钮的数量。另一种方法保留按钮，并用隐藏字段替换单选选项。@d1649356 of cour我看不出你到底做了什么，但从你所描述的我会知道的

<form class="filterSelection" id="filter-form" action="../php/editOffer/getInfo.php" method="POST">
    <table class="accountsTable">
        <thead>
            <tr>
                <th>Selected</th>
                <th>Project ID</th>
                <th>Revision</th>
                <th>Project Description</th>
                <th>Customer</th>
                <th>Date</th>
                <th>Creator</th>
                <th>Documentation</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="radio" name="selectedOffer" id="selectedOffer-1" value="1-1"></td>
                <td>1</td>
                <td>1</td>
                <td>Test</td>
                <td>Info</td>
                <td>2020-02-10</td>
                <td>Name</td>
                <td><button type="button" name="action" data-row="1" onclick="btnAction(this)" value="Download"><i
                            class="fa fa-download" data-row="1" aria-hidden="true"></i> Download</button>
                </td>
                <td><button type="button" name="action" onclick="btnAction(this)" value="Delete">
                        <i class="far fa-trash-alt"></i> Delete</button></td>
            </tr>
        </tbody>
    </table><br>
    <button name="submit" class="nextButton" type="button" value="Next"><i
            class="fas fa-arrow-alt-circle-right fa-2x"></i> Next</button>
</form>

<script>
    function btnAction(btn) {
        var row = btn.dataset.row;
        var radio = document.getElementById("selectedOffer-"+row);
        radio.checked = true;
        document.getElementById("filter-form").submit();
    }
</script>

<table class = "accountsTable">
            <thead>
                <tr>
                    <th>Project ID</th>
                    <th>Revision</th>
                    <th>Project Description</th>
                    <th>Customer</th>
                    <th>Date</th>
                    <th>Creator</th>
                    <th>Download</th>
                    <th>Delete</th>
                    <th>Edit</th>
                </tr>
            </thead>
            <tbody>
              <tr>
                    <form class="filterSelection" action="../php/editOffer/getInfo.php" method="POST">
                        <td>1</td>
                        <td>1</td>
                        <td>Test</td>
                        <td>Info</td>
                        <td>2020-02-10</td>
                        <td>Name</td>
                        <td><button type="submit" class="download" name="action" value="Download"><i class="fa fa-download" aria-hidden="true"></i></button>
                            </td>
                        <td><button type="submit" class="delete" name="action" value="Delete" 
                                    onclick="return confirm('Do you want to delete the selected offer? This action can´t be undone')">
                                <i class="far fa-trash-alt"></i></button></td>
                        <td><button name="action" class="edit" type="submit" value="Next"><i class="fas fa-edit"></i></button></td>
                        <input type="hidden" name="selectedOffer" value="1-1"/>
                    </form>
                </tr>
                                        <tr>
                    <form class="filterSelection" action="../php/editOffer/getInfo.php" method="POST">
                        <td>1</td>
                        <td>2</td>
                        <td>Demo</td>
                        <td>Info1</td>
                        <td>2020-02-13</td>
                        <td>Name1</td>
                        <td></td>
                        <td><button type="submit" class="delete" name="action" value="Delete" 
                                    onclick="return confirm('Do you want to delete the selected offer? This action can´t be undone')">
                                <i class="far fa-trash-alt"></i></button></td>
                        <td><button name="action" class="edit" type="submit" value="Next"><i class="fas fa-edit"></i></button></td>
                        <input type="hidden" name="selectedOffer" value="1-2"/>
                    </form>
                </tr>