Question

我有3个复选框，用户只能选择其中的1个或2个。如果用户选择3复选框，我将显示一条消息，其中jQuery说＆＃34;您无法选择3项＆＃34;。

<input type="checkbox" value="Walk" name="sports[]">
<input type="checkbox" value="Swim" name="sports[]">
<input type="checkbox" value="Run"  name="sports[]">

是否可以计算sports[]数组内的项目？

Answer 1

使用jquery中的:checked选择器检查已检查项目的长度，如果选中其中3个，则取消选中

$('input[name="sports[]"]:checkbox').change(function() {
    if($('input[name="sports[]"]:checked').length>2)
    {
        alert("You can't select 3 items");
        this.checked=false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="Walk" name="sports[]">
<input type="checkbox" value="Swim" name="sports[]">
<input type="checkbox" value="Run"  name="sports[]">

Answer 2

以下解决方案应该适合您

class

Answer 3

使用名称sports []计算“已选中”复选框的数量，如果计数为3，则输入错误

var count = $('input[name="sports[]"]:checked').length;
if(count >=3){ // stop the form submit and do alert messages }

Answer 4

你可以用这样的jQuery来检查：

$(document).ready(function(){
    $('input^="sports[]"').on('click',function(){
        var total_checked = $('input^="sports[]":checked').length();
        if(total_checked >= 2)
        {
            alert("You can check any two options.");
            return false;
        }
    });
});

Answer 5

是的，可以计算sports []数组中的项目。你可以在你去的地方解析标签解析。

let input = document.getElementsByTagName('input');
let result = [...input].map(x => JSON.parse(x.name.replace('sports', '')))
let count = result.map(x => x.length);
console.log('the arrays', result);
console.log('the counts within', count);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<input type="checkbox" value="Walk" name="sports[1,2,3,4]">
<input type="checkbox" value="Swim" name="sports[5,6,7,8]">
<input type="checkbox" value="Run" name="sports[10,11,12,13]">

如何计算HTML名称数组属性中的项目？

5 个答案: