选择下拉值，选中复选框并填写输入
选择下拉值，选中复选框并填写输入
提问于 2019-04-16 08:10:27
所需行为：
1.为field1选择“甜食”
- 将预先检查与预选的field1
- 具有相同值的值。如果复选框被选中，则应触发输入字段以打印出以前检查过的字符串。如果选中了值"a“，则应在input
- 中显示"a”如果在field1中选中了“field3”，则field3将使用值
填充
我有一切工作，除了项目3。除非我自己检查项目，然后他们将显示在输入。我不能对中的任何值进行硬编码，因为这些值将被动态引入。
下面我有一个有效的例子：
document.getElementById('field1').onchange = function() {
var boxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < boxes.length; i++) {
boxes[i].checked = boxes[i].value == this.value;
$checks = $(":checkbox");
$checks.on('change', function() {
var string = $checks.filter(":checked").map(function(i, v) {
return this.value;
}).get().join(" ,");
$('#field_results').val(string);
});
document.getElementById("field3").value = this.value;
}
};<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='field1' id="field1">
<option value="1">Fruits</option>
<option value="2">Vegetables</option>
<option value="3">Sweets</option>
<option value="4">Meat</option>
</select>
<div id='changer'>
<input type='checkbox' id='a' value="3" /><label>A</label><br />
<input type='checkbox' id='b' value="3" /><label>B</label><br />
<input type='checkbox' id='c' value="3" /><label>C</label><br />
<input type='checkbox' id='d' value="3" /><label>D</label>
</div>
<input type="text" id="field_results" /><br>
<select name='field3' id="field3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-04-16 08:44:32
如果您想要显示a，b，c，d，您需要在此函数中移出change event $checks.on('change', function() {}) the checked value not work，并更改为this.id而不是this.value。
document.getElementById('field1').onchange = function() {
var boxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < boxes.length; i++) {
boxes[i].checked = boxes[i].value == this.value;
$checks = $(":checkbox");
$checks.on('change', function() {
});
var string = $checks.filter(":checked").map(function(i, v) {
return $(this).next("label").html();
//return this.id;
}).get().join(" ,");
$('#field_results').val(string);
document.getElementById("field3").value = this.value;
}
};<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='field1' id="field1">
<option value="1">Fruits</option>
<option value="2">Vegetables</option>
<option value="3">Sweets</option>
<option value="4">Meat</option>
</select>
<div id='changer'>
<input type='checkbox' id='a' value="3" /><label>A</label><br />
<input type='checkbox' id='b' value="3" /><label>B</label><br />
<input type='checkbox' id='c' value="3" /><label>C</label><br />
<input type='checkbox' id='d' value="3" /><label>D</label>
</div>
<input type="text" id="field_results" /><br>
<select name='field3' id="field3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Stack Overflow用户
发布于 2019-04-16 08:19:59
您需要将复选框的事件处理程序与下拉列表的事件处理程序分开。此外，您应该尝试使用jquery或不使用jquery。
var $checks = $(":checkbox");
document.getElementById('field1').onchange = function() {
var boxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < boxes.length; i++) {
boxes[i].checked = boxes[i].value == this.value;
$checks.change();
document.getElementById("field3").value = this.value;
}
};
$checks.on('change', function() {
var string = $checks.filter(":checked").map(function(i, v) {
return this.value;
}).get().join(" ,");
$('#field_results').val(string);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='field1' id="field1">
<option value="1">Fruits</option>
<option value="2">Vegetables</option>
<option value="3">Sweets</option>
<option value="4">Meat</option>
</select>
<div id='changer'>
<input type='checkbox' id='a' value="3" /><label>A</label><br />
<input type='checkbox' id='b' value="3" /><label>B</label><br />
<input type='checkbox' id='c' value="3" /><label>C</label><br />
<input type='checkbox' id='d' value="3" /><label>D</label>
</div>
<input type="text" id="field_results" /><br>
<select name='field3' id="field3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Stack Overflow用户
发布于 2019-04-16 08:22:22
你需要的是这个
return $(this).next('label').text();你有两个问题
1)您的oncheck事件应该在正在更改的事件之外
2)您的标签位于外部复选框，因此如果您想获取其中的文本，则需要使用next或closest获取。
document.getElementById('field1').onchange = function() {
var boxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < boxes.length; i++) {
boxes[i].checked = boxes[i].value == this.value;
document.getElementById("field3").value = this.value;
}
};
$(":checkbox").on('change', function() {
var string = $(":checkbox").filter(":checked").map(function(i, v) {
return $(this).next('label').text();
}).get().join(" ,");
$('#field_results').val(string);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name='field1' id="field1">
<option value="1">Fruits</option>
<option value="2">Vegetables</option>
<option value="3">Sweets</option>
<option value="4">Meat</option>
</select>
<div id='changer'>
<input type='checkbox' id='a' value="3" /><label>A</label><br />
<input type='checkbox' id='b' value="3" /><label>B</label><br />
<input type='checkbox' id='c' value="3" /><label>C</label><br />
<input type='checkbox' id='d' value="3" /><label>D</label>
</div>
<input type="text" id="field_results" /><br>
<select name='field3' id="field3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55698830
复制相关文章
相似问题