Wie erhalten Sie den Wert des ausgewählten Kontrollkästchens und den Wert des Eingabetexts für dieses Kontrollkästchen?

Question

Ich habe eine Liste von Kontrollkästchen neben dem Eingabetext für jedes Kontrollkästchen. Wenn das Kontrollkästchen nicht aktiviert ist, deaktiviere ich den Eingabetext, der einwandfrei funktioniert. Ich möchte den Wert des Kontrollkästchens abrufen, das aktiviert ist, und die Eingabe, die vom Benutzer für dieses bestimmte Kontrollkästchen angegeben wurde. Ich kann den Wert der Checkbox bekommen, das Problem ist der Wert des Eingabetextes.

Beispiel:

1. CHECKBOX - wenn nicht deaktivieren Eingabetext

2. input geprüft - wenn Checkbox Benutzer in der Lage sein, überprüften Daten einzugeben.

Wie kann ich dies erreichen? Ihre Hilfe in fortgeschrittenen geschätzt

Hier ist meine [code][https://jsfiddle.net/JayStar/x5u1gyod/]

Answer 1

Verwenden Gefällt Ihnen dieses

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