我有一个默认的复选框,其他复选框将在我单击添加按钮后出现。我需要检查一个复选框是否被选中。但这里的问题是我的 jquery 只适用于默认复选框。代码如下:
HTML:
<form_answer>
<input type="hidden" class ="" id="correct_hidden" name="correct_hidden[][correct]" value="0"/>
<input type="checkbox" class ="" id="correct" name="correct[][correct]"/>
<button class="" id = "btn_add"> Add</button>
</form_answer>
JS:
<script>
$(document).ready(function(){
$('#btn_add').click(function(){
add_row();
});
});
function add_row(){
var id = $("#row").val();
id++;
var html = '<div class=""> ' +
'<input type="hidden" class ="" id="correct_hidden" name="correct_hidden[][correct]" value="0"/> ' +
'<input type="checkbox" class ="" id="correct" name="correct[][correct]"/>' +
'</div>' ;
$("form_answer").append(html);
$("#row").val(id);
}
$(document).ready(function(){
$("#correct").click(function () {
if ($(this).prop("checked")) {
$("#correct_hidden").val("1");
}else{
$("#correct_hidden").val("0");
}
});
});
</script>
上面的脚本仅适用于默认复选框。我需要脚本来处理所有新的附加复选框。我该如何解决这个问题?
最佳答案
您可以将先前的值 id
存储为局部变量,如下所示。
var id = 0;
$(document).ready(function(){
$('#btn_add').click(function(){
add_row();
});
});
function add_row(){
id++;
var html = '<div class=""> ' +
'<input type="hidden" class ="" id="correct_hidden" name="correct_hidden[][correct]" value="0"/> ' +
'<input type="checkbox" class ="" id='+ id +' name="correct[][correct]"/>' +
'</div>' ;
$("form_answer").append(html);
console.log("Id value: " + id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form_answer>
<input type="hidden" class ="" id="correct_hidden" name="correct_hidden[][correct]" value="0"/>
<input type="checkbox" class ="" id="0" name="correct[][correct]"/>
<button class="" id = "btn_add"> Add</button>
</form_answer>
关于javascript - 如何在追加后增加复选框 ID - JQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60110141/