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

Question

我有一个复选框旁边的复选框列表，每个复选框都有输入文本。如果未选中复选框，则禁用可正常工作的输入文本。我想获取选中的复选框的值以及用户为特定复选框给出的输入。我可以得到复选框的值，问题是获取输入文本的值。

例如：

1. CHECKBOX - 如果不检查禁用输入文本

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}; 
 
    \t selchbox.push(obj); 
 
    } \t \t \t 
 
    } 
 
    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>