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

<!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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些阅读 6,141评论 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,963评论 1 45
  • pyspark.sql模块 模块上下文 Spark SQL和DataFrames的重要类: pyspark.sql...
    mpro阅读 13,143评论 0 13
  • 看到一句话:“想收获最好的一切,要先让世界看到最好的你。” 人生百态、世事无常,真不知道什么时候灾祸会降临,就像从...
    周小葵阅读 1,638评论 0 0
  • 今天下午我们去了嘉峪关,那里有中国第一奇观,长城!于是我们就兴致勃勃地去了。那里很晒,姑妈给我买了袖套和遮阳帽,这...
    张依之yy阅读 1,729评论 1 2