Question

我有关于如何限制默认选中复选框的问题。例如，我有7个复选框。并且我想在页面加载后用3个默认选中的复选框来限制它。

this should be the output:

Checkbox1 : true
Checkbox2 : true
Checkbox3 : true
Checkbox4 : false
Checkbox5 : false
Checkbox6 : false
Checkbox7 : false

这是我的示例代码：

var mvp = 3;
$(document).ready(function() {
$("input:checkbox").each(function( index ) {
    ($this).attr("checked",true);
});

});

我有这个，我不知道我将把我的计数器（mvp）放在我的每个功能中。在此代码中，我的所有复选框都被选中：D。

抱歉新手问题，请帮帮我..

Answer 1

实际上不需要计数器，因为each函数将在索引中传递。只需使用索引作为计数器。

$(document).ready(function() {
    $("input:checkbox").each(function( index ) {
           this.checked = (index < 3);
    });
});

JS小提琴： http://jsfiddle.net/SB6aD/2/

Answer 2

使用jquery :lt选择器，它将匹配索引较小的所有元素。

示例：

$(function() {
  var mvp = 3;
  $('input:checkbox:lt('+mvp+')').prop('checked', true);
});

Answer 3

基于@Kevin Bowersox的代码：

var mvp = 3;
$(document).ready(function() {
    var counter = 0;
    $("input:checkbox").each(function( index ) {
        if(counter < mvp){
           $(this).attr("checked",true);
           counter++;
        }
    });
});

我将此代码修改为：

var mvp = 3;
    $(document).ready(function() {
$("input:checkbox").each(function( index ) {
        if(index < mvp){
           $(this).attr("checked",true);
        }
    });
});

Answer 4

不要使用Javascript设置页面的默认状态，请使用HTML“checked”属性。

<form action="demo_form.asp">
  <input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car" checked> I have a car<br>
  <input type="submit" value="Submit">
</form>

在此示例中，将检查汽车复选框。

Answer 5

demo

$(document).ready(function() {
    var checkboxes = $("input:checkbox");
    checkboxes.each(function( index ) {
        if (checkboxes.filter(':checked').length >= 3) {return;}
        this.checked = true;

    });

});

Answer 6

检查每个复选框后，

减少mvp。当它达到0时，开始取消选中。

$(document).ready(function() {
    var mvp = 3;
    $("input:checkbox").each(function( index ) {
        ($this).attr("checked", mvp > 0);
        mvp--;
    });
});

Answer 7

检查 .slice

$(function() {
  var mvp = 3;
  $('input:checkbox').slice(0, mvp).prop('checked', true);
  $('input:checkbox').slice(mvp).prop('checked', false);
});

的 See the JS Fiddle 的

请注意，checked不是属性而是属性，请使用.prop代替.attr。

限制默认选中复选框

7 个答案: