如何获取所选复选框的值以及该复选框的输入文本的值？

Question

我有一个复选框列表以及每个复选框的输入文本。 如果未选中该复选框，则我将禁用输入文本，这可以正常工作。 我想获取已选中复选框的值以及用户为该特定复选框提供的输入。 我可以获取选中复选框的值，问题是获取输入文本的值。

例如：

1. 复选框 -如果未选中，请禁用输入文本

2. INPUTTEXT-如果选中此复选框，则用户可以输入数据。

我该怎么做。 您的帮助深表感谢

这是我的[code][https://jsfiddle.net/JayStar/x5u1gyod/]

Answer 1

像这样使用

 // Returns an array with values of the selected (checked) checkboxes in "frm" function getSelectedChbox(frm) { var selchbox = []; // array that will store the value of selected checkboxes // gets all the input tags in frm, and their number var inpfields = frm.getElementsByTagName('input'); var nr_inpfields = inpfields.length; // traverse the inpfields elements, and adds the value of selected (checked) checkbox in selchbox for(var i=0; i<nr_inpfields; i++) { if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) { console.log(inpfields[i].id); var textboxVal = document.getElementById(inpfields[i].id+"code").value; console.log(textboxVal); var obj = {checkbox:inpfields[i].value,textbox:textboxVal}; selchbox.push(obj); } } return selchbox; } /* Test this function */ // When click on #langtest, alert the selected values document.getElementById('langtest').onclick = function(){ var selchb = getSelectedChbox(this.form); // gets the array returned by getSelectedChbox() alert(JSON.stringify(selchb)); } //Check if checkbox is checked, if not checked disable input text document.getElementById('html').onchange = function() { document.getElementById('htmlcode').disabled = !this.checked; }; document.getElementById('css').onchange = function() { document.getElementById('csscode').disabled = !this.checked; }; document.getElementById('javascript').onchange = function() { document.getElementById('javascriptcode').disabled = !this.checked; }; document.getElementById('php').onchange = function() { document.getElementById('phpcode').disabled = !this.checked; }; document.getElementById('python').onchange = function() { document.getElementById('pythoncode').disabled = !this.checked; }; document.getElementById('net').onchange = function() { document.getElementById('netcode').disabled = !this.checked; }; document.getElementById('mysql').onchange = function() { document.getElementById('mysqlcode').disabled = !this.checked; }; //--> 

  .programminglanguage{ width : auto; height : auto; margin-left : 19%; margin-right : 18%; margin-top : 2%; } .programming{ margin-left: 10%; } 

 <form action="lingos.php" method="post"> <div class="programminglanguage"> <div class="programming"> <h2>programming language</h2> <div class="row"> <p class="alert">Please check the box to enter programming language code. If checkbox is not checked you wont be able to enter code!!</p> <div class="col-sm-4"> <label for="html"><input type="checkbox" name="html[]" id="html" value="HTML" />&nbsp;HTML</label></br> <label for="htmlcode">HTML code:</label><input type="text" class="form-control" id="htmlcode" disabled /><br/></br> <label for="css"><input type="checkbox" name="css[]" id="css" value="CSS"/>&nbsp;CSS:</label></br> <label for="csscode">CSS code:</label><input type="text" class="form-control" id="csscode" disabled /><br/></br> <label for="javascript"><input type="checkbox" name="javascript[]" id="javascript" value="JavaScript"/>&nbsp;JavaScript:</label></br> <label for="javascriptcode">JavaScript code:</label><input type="text" class="form-control" id="javascriptcode" disabled /><br/></br> <label for="php"><input type="checkbox" name="php[]" id="php" value="PHP" />&nbsp;PHP:</label></br> <label for="phpcode">PHP code:</label><input type="text" class="form-control" id="phpcode" disabled /><br/></br> <label for="python"><input type="checkbox" name="python[]" id="python" value="Python" />&nbsp;Python:</label></br> <label for="pythoncode">Python code:</label><input class="form-control" type="text" id="pythoncode" disabled /><br/></br> <label for="net"><input type="checkbox" name="net[]" id="net" value=".Net" />&nbsp;.Net:</label></br> <label for="netcode">.Net code:</label><input type="text" class="form-control" id="netcode" disabled /><br/></br> <label for="mysql"><input type="checkbox" name="mysql[]" id="mysql" value="MySql" />&nbsp;MySql:</label></br> <label for="mysqlcode">MySql code:</label><input type="text" class="form-control" id="mysqlcode" disabled /><br/><br><br> </div> <input type="button" value="Submit" id="langtest" /> </div> </div> </div> </form>