How to get the value of selected checkbox and the value of input text for that checkbox?

Question

I have a list of check-boxes along side with input text for each checkbox. If the checkbox is not checked I disable the input text which works fine. I want to get the value of the checkbox that is checked and the input that was given by the user for that specific checkbox. I can get the value of checked checkbox the problem is getting the value of input text.

For Example:

1. CHECKBOX - if not checked disable input text

2. INPUTTEXT - if checkbox checked user be able to enter data.

How can I accomplish this. Your help appreciated in advanced

Here is my [code][https://jsfiddle.net/JayStar/x5u1gyod/]

Answer 1

Use Like this

// 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>