检查条件后使用jQuery取消复选框

Uncheck box using jQuery after checking condition

本文关键字：jQuery 取消 复选框 条件 检查      更新时间：2023-09-26

我使用.append在按钮单击上附加一个新的复选框。On Click事件正在工作，但有一些问题的代码。另外，如果用户单击第11个复选框，我必须显示一条错误消息并取消选中该复选框。我如何使用jQuery做到这一点?这里是FIDDLE． 代码:

HTML: 

    <button id="add">Add Checkbox</button>
    <div id="checkbox"></div>
jQuery: 

    $("#add").on("click", function () {
        alert("Click Successful");
        var Row = $('<div id="checkbox"> </div>');
        Row.append('<input type="checkbox" id="Bike">Check Me');
    });

更新演示

对于第一部分，使用此代码追加。

var row = $('#checkbox'); - 基于Id的选择器。

而不是$('<div id="checkbox"> </div>'); -它创建新的DOM元素。

$("#add").on("click", function () {
    alert("Click Successful");
    var Row = $('#checkbox');
    Row.append('<input type="checkbox" class="Bike">Check Me');
                   //                  ^ change ID to class to avoid duplicates
});

注意:id="Bike"在每个追加上被重复。因此，使用class="Bike"

对于第二部分，使用eq(10)获得第11个复选框- eq()。

大于10,:gt(9) 

$(document).on('change','.Bike:gt(9)',function(){
    if(this.checked){                 //check if checked
          alert('greater than 10 checkbox');
          this.checked = false;       //uncheck the checkbox
    }
});
<<h2>完整演示/h2>

try this:

var Row = $('#checkbox'); // address the destination by id
Row.append('<input type="checkbox" class="Bike">Check Me'); // use class instead of id

应该可以了。http://jsfiddle.net/jByt3/10/

$("#add").on("click", function () {
    alert("Click Successful");
    if ( $('#checkbox input[type="checkbox"]').length < 10 ) {
        $('#checkbox').append('<input type="checkbox" id="Bike">Check Me');
    }
});

指出:

当你想使用一个id时，你应该这样调用它。

$('#id')

当你想使用一个类时，你应该这样调用它。

$('.class')

请不要使用整个html标记来引用元素

您可以对不同的id使用此代码，以保持对文本框数量的计数

    var count = 0;
$("#add").click(function(){
    var count = $('#checkbox input').length;
    if(count < 11) {
        $("#checkbox").append('<input type="checkbox" id="'+ (count+1) +'">Check Me');
        count++;
    }
});
相关文章：