Question

我想知道如何在输入类型编号更改时添加复选框。

默认我有：

HTML CODE

<label for checkbox_number>Number of checkboxes :</label>
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="1" onkeydown="change_cb()"/>

<input id="checkbox1" type="checkbox" name="checkbox[]" value="cb1">

如果我将复选框号码更改为2，我想要javascript / ajax add

<input id="checkbox2" type="checkbox" name="checkbox[]" value="cb2">

如果我将更改号码更改为1，则必须删除一个复选框。

我已经做了同样的事情但是用表（添加一行或删除一行）但在这里我不知道如何添加新元素（在我的第一个脚本上我不添加新表，只是新行）。 ..

需要帮助来编写我的JS函数 change_cb（）

编辑给我答案

我发现如何使用DADE帮助（谢谢DADE）：

HTML代码（相同）

<label for="cb_number">How many checkboxes ?</label>
<input id="cb_number" name="cb_number" type="number" size="1" maxlength="1" value="1">
<div class="my_cb_result"></div>

jQuery CODE

$(window).ready(function() {
    $('#cb_number').on('keyup mouseup', function() {
        var number = parseInt($(this).val());
        $('input[type="checkbox"]').remove();
        $('label[class="to_del"]').remove();
        for (var i=1;i<=number;i++) {
            var data = '<label for="checkbox" class="to_del">Label of my checkbox</label><input id="checkbox'+i+'" type="checkbox" name="checkbox[]" value="'+i+'">';
        }
        $('.my_cb_result').append(data);
    });
});

JSFiddle with comments

Answer 1

试试这个：

var ele = '<input id="checkbox2" type="checkbox" name="checkbox[]" value="cb2">';
document.getElementById("yourElementID").appendChild(ele);

Answer 2

您的意思是，如果checkbox_number的值设置为“2”，您想要呈现第二个复选框吗？

如果是这样，您应该使用onblur或类似checkbox_number来运行一个通过getElementById和appendChild呈现新功能的功能。

IE：

<script type="text/javascript">
function change_cb() {
var secondCheckbox = '<input id="checkbox_number2" name="checkbox_number" type="number" size="1" maxlength="1" value="1" />";
document.getElementById("yourForm").appendChild(secondCheckBox);
}
</script>

<div id="yourForm">

<label for checkbox_number>Number of checkboxes :</label>
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="1" onblur="change_cb()"/>

<input id="checkbox1" type="checkbox" name="checkbox[]" value="cb1">

</div>

编辑：顺便说一句，从你发布的内容来看，你不应该需要Ajax。

Answer 3

HTML：

<label for checkbox_number>Number of checkboxes :</label>
<input id="checkbox_number" name="checkbox_number" type="number" size="1" maxlength="1" value="0">
<div class="inputs"></div>

JS：

$('#checkbox_number').on('keyup mouseup', function() {
    var number = parseInt($(this).val());
    $('input[type="checkbox"]').remove();
    for (var i=1;i<=number;i++) {
        var data = '<input id="checkbox'+i+'" type="checkbox" name="checkbox[]" value="cb'+i+'">';
        $('.inputs').append(data);
    }
});

JSFiddle with comments

在输入类型编号更改时添加复选框

3 个答案: