时间戳

首页 > 解决方案 > 如何使用javascript在按钮单击时连续更改单选按钮的选中状态？

javascript - 如何使用javascript在按钮单击时连续更改单选按钮的选中状态？

问题描述

我想要一个 javascript 函数，它在单击时更改单选按钮的排列方式，即表格的每一行都有 3 个值为 1、2、3 的单选按钮，并且我有两个向前和向后的按钮。单击前进按钮时，如果选中的单选按钮的找到值小于 3，则未选中该单选按钮并选中下一个单选按钮，即如果最初为 2，则现在由于前向单击为 3（现在已选中，并且 2未选中）。

只需关注forwardclick()功能，一旦执行，backwardclick()功能也将得到解决。与后退按钮相同的情况。

初始输出

初始状态图片

点击前进按钮

最终状态图片

我尝试了很多东西，只是缺少一些功能。请纠正我。谢谢

下面是我的代码。

<!DOCTYPE html>
<html>
<body>

<table border=1>
<tr></tr>
<tr></tr>
<tr>

<td><input type='radio' name=row_1[] value='1' checked></td>
<td><input type='radio' name=row_1[] value='2' ></td>
<td><input type='radio' name=row_1[] value='3' ></td>
</tr>

<tr>

<td><input type='radio' name=row_2[] value='1' ></td>
<td><input type='radio' name=row_2[] value='2' checked></td>
<td><input type='radio' name=row_2[] value='3' ></td>
</tr>

<tr>

<td><input type='radio' name=row_3[] value='1' checked></td>
<td><input type='radio' name=row_3[] value='2' ></td>
<td><input type='radio' name=row_3[] value='3' ></td>
</tr>

<tr></tr>
<tr></tr>

</table>

<br><br>

<button onclick="backwardclick();">backward</button>
<button onclick="forwardclick();">forward</button>


<script>
function forwardclick() {
            var trtags = document.querySelectorAll("tr");

            for (var x = 0; x < trtags.length; x++) {

                if(x>=2){

                var tdtags = trtags[x].querySelectorAll("td");

                for (var y = 0; y < tdtags.length; y++){

                       var td = tdtags[y].querySelector("input[type=radio]")

                        // check td value if equal to 3 then no forward else increment the value by 1 and checked that radio button.

                        if(td.value != 3){

                            var status = td.value

                            td.checked = false

                            status = status + 1
                            // whenever it is found that td.value is equal to incremented status value that td is checked.

                            var tdtagsp = trtags[x].querySelectorAll("td")

                            for (var p = 0; p < tdtagsp.length; p++){

                                   var td = tdtagsp[p].querySelector("input[type=radio]")

                                   if(status == td.value){

                                    td.checked = true

                                   }else{

                                    td.checked = false

                                   }

                               }

                        }




                    } // end of for loop of tdtags



                   }// end of if (x>=2)

                }// end of for loop of trtags




        }// end function

        function backwardclick() {

            var trtags = document.querySelectorAll("tr");

            for (var x = 0; x < trtags.length; x++) {

                if(x>=2){

                var tdtags = trtags[x].querySelectorAll("td");

                for (var y = 0; y < tdtags.length; y++){

                    var td = tdtags[y].querySelector("input[type=radio]")

                    if(td.checked){
                    document.write(" checked ")
                    document.write(td.value)
                    }
                    else{
                    document.write(" unchecked ")                    
                    }


                    } // end of for loop of tdtags

                    document.write("<td>")

                   }// end of if (x>=2)

                }// end of for loop of trtags

        }// end function
</script>

</body>
</html>

标签： javascripthtml

解决方案

看看这是否能解决您的问题。 

  function forwardclick() {
            var trtags = document.querySelectorAll("tr");

            for (var x = 0; x < trtags.length; x++) {
                var inp = trtags[x].querySelectorAll("input[type=radio]")
                for (var i = 0; i < inp.length; i++) {
                    if (inp[i].checked && i != 2) {
                        inp[i].checked = false;
                        inp[i + 1].checked = true;
                        break;
                    }
                }
            }
        }
  function backwardclick() {
            var trtags = document.querySelectorAll("tr");

            for (var x = 0; x < trtags.length; x++) {
                var inp = trtags[x].querySelectorAll("input[type=radio]")
                for (var i = 0; i < inp.length; i++) {
                    if (inp[i].checked && i != 0) {
                        inp[i].checked = false;
                        inp[i - 1].checked = true;
                        break;
                    }
                }
            }
        }
    <table border=1>
        <tr></tr>
        <tr></tr>
        <tr>

            <td><input type='radio' name=row_1[] value='1' checked></td>
            <td><input type='radio' name=row_1[] value='2'></td>
            <td><input type='radio' name=row_1[] value='3'></td>
        </tr>

        <tr>

            <td><input type='radio' name=row_2[] value='1'></td>
            <td><input type='radio' name=row_2[] value='2' checked></td>
            <td><input type='radio' name=row_2[] value='3'></td>
        </tr>

        <tr>

            <td><input type='radio' name=row_3[] value='1' checked></td>
            <td><input type='radio' name=row_3[] value='2'></td>
            <td><input type='radio' name=row_3[] value='3'></td>
        </tr>

        <tr></tr>
        <tr></tr>

    </table>

    <br><br>

    <button onclick="backwardclick();">backward</button>
    <button onclick="forwardclick();">forward</button>

推荐阅读