有多组radio单选按钮‘是’、‘否’，用js如何实现点‘是’的时候其他按钮都变成‘否’？

时间：2021-07-17 13:33:06
有多组radio单选按钮‘是’、‘否’，用js如何实现点‘是’的时候其他按钮都变成‘否’？
然后再点下一个‘是’的时候其他的又变成‘否’了？
求指点
有多组radio单选按钮‘是’、‘否’，用js如何实现点‘是’的时候其他按钮都变成‘否’？

6 个解决方案

#1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>test</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#ulTest1 :radio").click(function(){

                if($(this).is(":checked")){

                    $("#ulTest1 :radio[value=0][name!="+this.name+"]").prop("checked", true);

                }

            });

        });

    </script>

</head>

<body>

<ul id="ulTest1">

    <li>

        <input type="radio" name="A" value="1" checked="checked" />是

        <input type="radio" name="A" value="0" />否

    </li>

    <li>

        <input type="radio" name="B" value="1"/>是

        <input type="radio" name="B" value="0" checked="checked"  />否

    </li>

    <li>

        <input type="radio" name="C" value="1"/>是

        <input type="radio" name="C" value="0" checked="checked"  />否

    </li>

    <li>

        <input type="radio" name="D" value="1"  />是

        <input type="radio" name="D" value="0" checked="checked" />否

    </li>

</ul>

<hr />

你喜欢下面的哪一种水果？

<ul id="ulTest2">

    <li>

        <input type="radio" name="fruit" value="1" checked="checked" />桔子

    </li>

    <li>

        <input type="radio" name="fruit" value="2"/>苹果

    </li>

    <li>

        <input type="radio" name="fruit" value="3"/>梨子

    </li>

    <li>

        <input type="radio" name="fruit" value="4"  />西红柿

    </li>

</ul>

</body>

</html>


上面的代码实现了你所说的功能。 但似乎并不合理，  因为组之间要互斥， 而且每组只有是、否的功能， 那就不如直接用下面这种一个组更好， 不用写一行代码。

#2

是呀，就是想实现第一种多组radio的，谢啦

#3

引用 2 楼 Coyotess 的回复:
是呀，就是想实现第一种多组radio的，谢啦


没事就结贴吧 有多组radio单选按钮‘是’、‘否’，用js如何实现点‘是’的时候其他按钮都变成‘否’？

#4

能否说下思路？从if那里开始就有点懵

#5

引用 4 楼 Coyotess 的回复:
能否说下思路？从if那里开始就有点懵

回复人家的， 应该点一下右下角的“引用”， 这样人家才能及时看到消息。

下面的代码稍改了一下， 并加上了注释： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>test</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

        //加载完dom结构之后的事件（相当于window.onload）

        $(function(){

            //ulTest1 这个元素下的所有 value=1 (是) 的 radio 的点击事件 

            $("#ulTest1 :radio[value=1]").click(function(){

                //将所有 ulTest1 下的所有 value=0 (否) 的 radio 而且 name 与点击元素的name 不同的 checked 改为选中

                $("#ulTest1 :radio[value=0][name!="+this.name+"]").prop("checked", true);

            });

        });

    </script>

</head>

<body>

<ul id="ulTest1">

    <li>

        <input type="radio" name="A" value="1" checked="checked" />是

        <input type="radio" name="A" value="0" />否

    </li>

    <li>

        <input type="radio" name="B" value="1"/>是

        <input type="radio" name="B" value="0" checked="checked"  />否

    </li>

    <li>

        <input type="radio" name="C" value="1"/>是

        <input type="radio" name="C" value="0" checked="checked"  />否

    </li>

    <li>

        <input type="radio" name="D" value="1"  />是

        <input type="radio" name="D" value="0" checked="checked" />否

    </li>

</ul>

</body>

</html>

#6

这样啊，第一次在这个平台发帖，不太会用，不过还是谢谢

#1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>test</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

        $(function(){

            $("#ulTest1 :radio").click(function(){

                if($(this).is(":checked")){

                    $("#ulTest1 :radio[value=0][name!="+this.name+"]").prop("checked", true);

                }

            });

        });

    </script>

</head>

<body>

<ul id="ulTest1">

    <li>

        <input type="radio" name="A" value="1" checked="checked" />是

        <input type="radio" name="A" value="0" />否

    </li>

    <li>

        <input type="radio" name="B" value="1"/>是

        <input type="radio" name="B" value="0" checked="checked"  />否

    </li>

    <li>

        <input type="radio" name="C" value="1"/>是

        <input type="radio" name="C" value="0" checked="checked"  />否

    </li>

    <li>

        <input type="radio" name="D" value="1"  />是

        <input type="radio" name="D" value="0" checked="checked" />否

    </li>

</ul>

<hr />

你喜欢下面的哪一种水果？

<ul id="ulTest2">

    <li>

        <input type="radio" name="fruit" value="1" checked="checked" />桔子

    </li>

    <li>

        <input type="radio" name="fruit" value="2"/>苹果

    </li>

    <li>

        <input type="radio" name="fruit" value="3"/>梨子

    </li>

    <li>

        <input type="radio" name="fruit" value="4"  />西红柿

    </li>

</ul>

</body>

</html>


上面的代码实现了你所说的功能。 但似乎并不合理，  因为组之间要互斥， 而且每组只有是、否的功能， 那就不如直接用下面这种一个组更好， 不用写一行代码。

#2

是呀，就是想实现第一种多组radio的，谢啦

#3

引用 2 楼 Coyotess 的回复:
是呀，就是想实现第一种多组radio的，谢啦


没事就结贴吧 有多组radio单选按钮‘是’、‘否’，用js如何实现点‘是’的时候其他按钮都变成‘否’？

#4

能否说下思路？从if那里开始就有点懵

#5

引用 4 楼 Coyotess 的回复:
能否说下思路？从if那里开始就有点懵

回复人家的， 应该点一下右下角的“引用”， 这样人家才能及时看到消息。

下面的代码稍改了一下， 并加上了注释： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>test</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">

        //加载完dom结构之后的事件（相当于window.onload）

        $(function(){

            //ulTest1 这个元素下的所有 value=1 (是) 的 radio 的点击事件 

            $("#ulTest1 :radio[value=1]").click(function(){

                //将所有 ulTest1 下的所有 value=0 (否) 的 radio 而且 name 与点击元素的name 不同的 checked 改为选中

                $("#ulTest1 :radio[value=0][name!="+this.name+"]").prop("checked", true);

            });

        });

    </script>

</head>

<body>

<ul id="ulTest1">

    <li>

        <input type="radio" name="A" value="1" checked="checked" />是

        <input type="radio" name="A" value="0" />否

    </li>

    <li>

        <input type="radio" name="B" value="1"/>是

        <input type="radio" name="B" value="0" checked="checked"  />否

    </li>

    <li>

        <input type="radio" name="C" value="1"/>是

        <input type="radio" name="C" value="0" checked="checked"  />否

    </li>

    <li>

        <input type="radio" name="D" value="1"  />是

        <input type="radio" name="D" value="0" checked="checked" />否

    </li>

</ul>

</body>

</html>

#6

这样啊，第一次在这个平台发帖，不太会用，不过还是谢谢
标签：

相关文章