美文网首页
多行radio(单选)标签限制选择行数

多行radio(单选)标签限制选择行数

作者: MrThorn | 来源:发表于2018-08-06 13:56 被阅读0次

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<label for=""><input type="radio" name="a">1</label>
<label for=""><input type="radio" name="a">2</label>
<label for=""><input type="radio" name="a">3</label>
<label for=""><input type="radio" name="a">4</label>
</div>
<div>
<label for=""><input type="radio" name="b">1</label>
<label for=""><input type="radio" name="b">2</label>
<label for=""><input type="radio" name="b">3</label>
<label for=""><input type="radio" name="b">4</label>
</div>
<div>
<label for=""><input type="radio" name="c">1</label>
<label for=""><input type="radio" name="c">2</label>
<label for=""><input type="radio" name="c">3</label>
<label for=""><input type="radio" name="c">4</label>
</div>
<div>
<label for=""><input type="radio" name="d">1</label>
<label for=""><input type="radio" name="d">2</label>
<label for=""><input type="radio" name="d">3</label>
<label for=""><input type="radio" name="d">4</label>
</div>
<div>
<label for=""><input type="radio" name="e">1</label>
<label for=""><input type="radio" name="e">2</label>
<label for=""><input type="radio" name="e">3</label>
<label for=""><input type="radio" name="e">4</label>
</div>
<div>
<label for=""><input type="radio" name="f">1</label>
<label for=""><input type="radio" name="f">2</label>
<label for=""><input type="radio" name="f">3</label>
<label for=""><input type="radio" name="f">4</label>
</div>
</body>
</html>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js">

</script>
<script type="text/javascript">
var nameArr = [];
("input[type='radio']").click(function(){ if(!arrHasValue((this).attr("name"),nameArr)){
if(nameArr.length>3){
alert("您最多只能点击四个");
("input:radio[name="+nameArr[0]+"]").prop("checked",false); nameArr.shift(0,1); nameArr.push((this).attr("name"));
}else{
nameArr.push($(this).attr("name"));
}
}
});

function arrHasValue(v, arr) {
    var output = false;
    for (var i in arr) {
        if (v == arr[i]) {
            output = true;
            return output;
        }
    }
    output = false;
    return output;
}

</script>

相关文章

网友评论

      本文标题:多行radio(单选)标签限制选择行数

      本文链接:https://www.haomeiwen.com/subject/ybawvftx.html