Javascript 在jQuery中选中复选框时追加文本框。
在这里,我有一堆复选框,在它们各自的div中 对于每个至少有一个复选框处于选中状态的div,我想在Javascript 在jQuery中选中复选框时追加文本框。,javascript,jquery,Javascript,Jquery,在这里,我有一堆复选框,在它们各自的div中 对于每个至少有一个复选框处于选中状态的div,我想在div#tables中添加一个文本框,反之亦然 演示: 我该怎么做? 有人能帮我吗 HTML <select id="count" style="float:left;"> <option value="1">1</option> <option value="2">2</option> <option val
div#tables
中添加一个文本框,反之亦然
演示:
我该怎么做?
有人能帮我吗
HTML
<select id="count" style="float:left;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
<div style="float:left;" id="tables"></div>
<br/>
<br/>
<div class="checkbox" data-toggle="false" data-min="2" data-type="t1" style='float:left;background:yellow;width:100px'>
<input id="checkbox-1" type="checkbox" name="Data1" value="option1" />
<label for="checkbox-1">HTML</label>
<br />
<input id="checkbox-2" type="checkbox" name="Data2" value="option2" />
<label for="checkbox-2">CSS</label>
<br />
<input id="checkbox-3" type="checkbox" name="Data3" value="option3" />
<label for="checkbox-3">HTML</label>
<br />
<input id="checkbox-7" type="checkbox" name="Data7" value="option7" />
<label for="checkbox-7">HTML</label>
<br />
</div>
<div class="checkbox" data-toggle="false" data-min="3" data-type="t1" style='float:left;margin-left:100px;background:brown;width:100px'>
<input id="checkbox-4" type="checkbox" name="Data4" value="option4" />
<label for="checkbox-4">CSS</label>
<br />
<input id="checkbox-5" type="checkbox" name="Data5" value="option5" />
<label for="checkbox-5">HTML</label>
<br />
<input id="checkbox-6" type="checkbox" name="Data6" value="option6" />
<label for="checkbox-6">CSS</label>
<br />
<input id="checkbox-8" type="checkbox" name="Data8" value="option8" />
<label for="checkbox-8">HTML</label>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
HTML
CSS
HTML
HTML
CSS
HTML
CSS
HTML
jQuery
$(document).ready(function () {
$('#count').on('change', function () {
//do stuff here
//my random "on change" behaviour {
var chkboxes = $('input[type=checkbox]:checked');
var txtboxes = $('input[type=text]');
for (var i = 0; i < chkboxes.length; i++) {
$(chkboxes[i]).prop('checked', false);
}
for (var i = 0; i < txtboxes.length; i++) {
$(txtboxes[i]).remove();
}
});
$('input[type=checkbox]').on('change', function (e) {
//this was deselected no need to check?
if ($(this).prop('checked')) {
var parent = $($(this).parent()[0]);
var newtextbox = '<input type="text" value="' + parent + '"/>';
$("#tables").append(newtextbox); //append table
}
if (!$(this).prop('checked')) {
return false;
}
});
});
$(文档).ready(函数(){
$('#count')。on('change',function(){
//在这里做事
//我的随机“改变”行为{
var chkboxes=$('input[type=checkbox]:checked');
var txtboxs=$('input[type=text]');
对于(变量i=0;i
提前感谢。我将id添加到您的附加文本区域,以便能够知道它们是否存在
var newtextbox = '<input id="textarea_'+classname+'" type="text" value="' + parent + '"/>';
你能检查一下这把小提琴吗?
你的小提琴不是已经在这样做了吗?@NickB-是的,但我只想要一个文本框div@NareshKamireddy在这种情况下,实现id文本框带有id@keshu_vats你能做些什么fiddle@NareshKamireddy我刚刚用一个新的小提琴示例编辑了我的答案。请给我反馈:)我也希望反之亦然(也删除)@Naresh Kamireddy,链接编辑,我认为这就是我认为的工作,请检查:)
$("#textarea_"+classname).remove();