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

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

本文关键字:复选框 文本 输入 何获取 获取      更新时间:2023-09-26

我有一个复选框列表,每个复选框都有输入文本。如果未选中复选框,则禁用输入文本,这很好。我想要得到被选中的复选框的值以及用户为那个特定的复选框给出的输入。我可以得到选中的复选框的值,问题是得到输入文本的值。

例如:

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

  2. INPUTTEXT -如果复选框选中,用户可以输入数据

我怎样才能做到这一点。感谢您的高级帮助

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

使用这样的

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