Jquery令checkbox为单选

JQuery实现Checkbox单选

最新推荐文章于 2024-08-14 11:55:10 发布

原创最新推荐文章于 2024-08-14 11:55:10 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ViewUI

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍使用JQuery将多个Checkbox转换为单选按钮的方法。通过两种不同的方式实现了这一功能：一是点击当前Checkbox时取消其他兄弟Checkbox的选择状态；二是仅设置被点击的Checkbox为选中状态，同时取消所有相同类名下Checkbox的选择状态。这两种方法适用于需要使用Checkbox但又希望实现单选功能的场景。

Jquery令checkbox为单选

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//第一种方法
    $(".c").click(function(){
        $(this).siblings().attr('checked',false);
    });
//第二种方法
    $(".c1").click(function(){
   $('.c1').attr('checked',false);
   $(this).attr('checked',true);
    });
});
function f1(){
$('#fc').attr('checked',true);
}
</script>
</head>
<body>
第一种方法<br/>
<input type="checkbox" id="fc" value="hi" class="c"/><input type="button" value="点我" onclick="f1();"/> <br/>
<input type="checkbox" class="c" /><br/>
<input type="checkbox" class="c" /><br/>

第二种方法<br/>
<input type="checkbox" class="c1" /><br/>
<input type="checkbox" class="c1" /><br/>
<input type="checkbox" class="c1" /><br/>
<input type="checkbox" class="c1" /><br/>
</body>
</html>