[英]jquery checkbox get value text input
I have list input checkbox 我有列表输入复选框
<input type="checkbox" name="id_image" value="homies_01" class="id_image" /> <input type="checkbox" name="id_image" value="homies_02" class="id_image" /> <input type="checkbox" name="id_image" value="homies_03" class="id_image" /> <input type="text" name="id_image" value="" class="id_image_check" />
How to check multiple input checkbox
i have show value to input type="text"
as 如何检查多个输入
checkbox
我有显示值input type="text"
作为
<form> <input type="text" name="id_image" value="homies_01, homies_02, homies_03" class="id_image_check" /> </form>
With jquery 用jQuery
$(".id_image").on("click",function(){
$(".id_image_check").val(
$(".id_image :checked").map((i,el) => el.value).join(", ")
)
});
There is a perfecly solution with Vanilla Javascript Vanilla Javascript有一个完美的解决方案
function attachListeners() {
var checkboxes = document.getElementsByClassName('id_image')
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].addEventListener('click', getAndPutValues, false);
}
}
function getAndPutValues() {
var result = [];
document.querySelectorAll(".id_image:checked").forEach(function(item) { result.push(item.value);});
document.querySelector('.id_image_check').value = result.join(', ');
}
attachListeners();
First of all you should use array notation for checkbox names 首先,您应该对复选框名称使用数组符号
<input type="checkbox" name="id_image[]" value="homies_01" class="id_image" />
<input type="checkbox" name="id_image[]" value="homies_02" class="id_image" />
<input type="checkbox" name="id_image[]" value="homies_03" class="id_image" />
It will help you to post multiple values simultaneously 这将帮助您同时发布多个值
After that for checking values in jQuery you can use 之后,您可以使用jQuery检查值
<script type="text/javascript">
$('[name="id_image[]"]').click(function(){
var value = '';
$('[name="id_image[]"]:checked').each(function(){
value += $(this).val();
});
$('#id_image_check').val(value);
});
</script>
Try this : 尝试这个 :
<input type="checkbox" name="id_image" value="homies_01" class="id_image" onchange="toggleCheckbox(this)" />
<input type="checkbox" name="id_image" value="homies_02" class="id_image" onchange="toggleCheckbox(this)" />
<input type="checkbox" name="id_image" value="homies_03" class="id_image" onchange="toggleCheckbox(this)" />
<input type="text" name="id_image" id="id_image" value="" class="id_image_check" />
<script type="text/javascript">
var arrImages = [];
function toggleCheckbox(element) {
console.log('element', element.value);
arrImages.push(element.value);
document.getElementById("id_image").value = arrImages;
}
</script>
Just use square brackets []
at end of name if you want to submit it using form or use the following method in jQuery to get values of multiple selected checkboxes. 如果要使用表单提交,请在名称末尾使用方括号
[]
,或在jQuery中使用以下方法获取多个所选复选框的值。
$('#show').click(function(){ values = ""; $('input.id_image:checked').each(function(){ values += $(this).val() + " "; }); if(values){ $('#values').html(values); }else{ $('#values').html("None"); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="id_image[]" value="homies_01" class="id_image" /> Homies 1 <input type="checkbox" name="id_image[]" value="homies_02" class="id_image" /> Homies 2 <input type="checkbox" name="id_image[]" value="homies_03" class="id_image" /> Homies 3 <br> <button id="show">Show</button> <br> <div id="values"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.