所需行为:
1.为field1选择“甜食”
填充
我有一切工作,除了项目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>
发布于 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>
发布于 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>
发布于 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>
https://stackoverflow.com/questions/55698830
复制相似问题