如何获取所选复选框的值以及该复选框的输入文本的值
How to get the value of selected checkbox and the value of input text for that checkbox?
我有一个复选框列表,每个复选框都有输入文本。如果未选中复选框,则禁用输入文本,这很好。我想要得到被选中的复选框的值以及用户为那个特定的复选框给出的输入。我可以得到选中的复选框的值,问题是得到输入文本的值。
例如:
-
复选框 -如果未选中则禁用输入文本
-
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" /> 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"/> 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"/> 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" /> 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" /> 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" /> .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" /> 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>
相关文章:
- 复选框与文本内联-JS问题
- 根据文本值禁用复选框
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- Javascript选中/取消选中所有复选框并将值写入文本区域
- 获取文本框中所有选定复选框的值
- 动态选中文本区域中现有项目的复选框组
- 选中复选框时更改文本框值
- 单击每个表格行中的复选框时启用文本框
- jQuery表 - 如何根据选中的复选框在单元格中写入文本
- 在 AngularJs 中触发文本框的复选框
- 基于复选框 Jquery 更新文本框
- 根据复选框选择 jQuery 更新文本框
- 我无法禁用带有复选框的文本框
- 从选中的复选框中获取所有值,并将其放入文本区域
- 如何使用选中的复选框文本自动填充输入文本字段
- 如何隐藏复选框文本
- 改变输入的火灾功能;使用jQuery标记(复选框/文本框)
- 选中复选框文本不变
- 我怎么能得到一个复选框文本在<光>标记,并在jQuery中的另一个标签中显示
- 可能添加CSS到一些JS样式禁用复选框文本