根据复选框输入动态生成具有唯一ID的文本区域
我正在为我的公司制定一个程序来处理不同的产品类型并创建文件。
我有一个表格，在几个月的时间内最终将增加到接近150个复选框选项。 我正在努力获得最佳方法的输入并从长远来看节省时间。
所以例如我有这个：
NOT
THA
TAB22
我需要的是，对于每个被点击的复选框，我需要在一个名为
的div中显示一个带有简单标题的文本区域，该文本区域等于上面的复选框值。从这里用户将然后在相应的文本区域中粘贴文件名。 基本上每个文本区域都与一个复选框选项相关联。
我使用PHP来处理表单，所以在提交时，我需要将每个具有值的文本区域的值存储到单独的变量中。 有没有办法动态地做到这一点？
我对jquery，javascript，php或任何东西开放。
我只是好奇最好这样做。 否则，我的知识只能手动创建150个复选框，然后创建150个文本区域，然后创建150个jQuery隐藏/显示方法，然后创建150个php检查以确定哪些文本区域具有值并将它们分配给变量。
你可以试试这个
HTML
JS
$('input:checkbox[name="size"]').on('click', function(){ if($(this).is(':checked')) { $('') // inputArea is a class not an ID because ID should be anique .append($('', {id:'txtArea_'+$(this).val(), name:'txtArea_'+$(this).val()})) .insertAfter($(this).next('br')); } else { $(this).next('br').next('div.inputArea').remove(); } });
演示 。
每个textarea都有名称和id，前缀为txtArea_ ，其值为相应的复选框，因此如果提交了一个复选框且值为NOT则可以在php检索相应textarea的值
$txtArea_NOT=$_POST['txtArea_NOT']; // When form's method is post
如果你正在使用jQuery，你应该能够使用/修改以下作为基础。
$('input[type=checkbox]').click(function() { var value = $(this).val(); $(this).append(value +'
'); });
您可以尝试使用Wrap和unwrap方法来完成您的工作。
记住ID在页面中应该是唯一的。 所以我没有为id分配一个textarea div类。
$('input[type=checkbox]').on('click', function() { var isChecked = $(this).is(':checked'); if (isChecked) { $(this).wrap(''); $(this).closest('div').prepend(''); } else{ $(this).closest('div').find('.text-area').remove(); $(this).unwrap(); } });
在这里演示
所以基本上你将你的复选框包装在一个div中并分配它。当你取消选中它时，包装被删除……这与其他复选框无关。 所以它应该适用于任意数量的复选框。
HTML
你应该为复选框提供唯一的ID，这是一种很好的做法。 这也将显示/隐藏textareas，以保留已输入的任何文本 – 这可能是好事还是坏事，具体取决于您的要求。
JavaScript的
var cbList = document.getElementsByClassName( 'cbFileList' ); var i; for ( i = 0; i < cbList.length; i++ ) { createTextArea( cbList[i] ); cbList[i].addEventListener( 'click', function() { var cb = this; if ( cb.checked ) { showTextArea( cb ); } else { hideTextArea( cb ); } }); } function showTextArea( cb ) { document.getElementById( 'div-' + cb.id).style.display = ''; } function hideTextArea( cb ) { document.getElementById( 'div-' + cb.id).style.display = 'none'; } function createTextArea( cb ) { var newDiv = document.createElement( 'div' ); var newTextArea = document.createElement( 'textarea' ); newDiv.setAttribute( 'id', 'div-' + cb.id ); newDiv.innerHTML = '' + cb.value + '
'; // Create bold text using checkbox's value newTextArea.setAttribute( 'id', 'ta-' + cb.id ); newTextArea.setAttribute( 'name', 'ta-' + cb.id ); newTextArea.innerHTML = cb.value; newDiv.appendChild( newTextArea ); cb.parentNode.appendChild( newDiv ); }
输出
NOT NOT
THA THA
...
PHP
$value ) { if ( strpos( $key, 'ta-' ) !== false && strlen( $value ) > 0 ) { // Found a textarea with content! // Do something with $_POST[$key], which contains the contents of textarea } } ?>