jQuery的复选框获取价值的文字输入

我有列表输入复选框jQuery的复选框获取价值的文字输入

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

如何检查多个输入checkbox我有表演的价值input type="text"为

<form> 
 
<input type="text" name="id_image" value="homies_01, homies_02, homies_03" class="id_image_check" /> 
 
</form>

来源

2017-09-16 DinhTv

它在这里回答： https://stackoverflow.com/questions/2834350/get-checkbox- value-in-jquery – Kamotho

有与香草的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();

来源

2017-09-16 11:17:38

大力支持！ Thanks @Henrique – DinhTv

'.map（item => item.value）'... –

与jQuery

$(".id_image").on("click",function(){ 
    $(".id_image_check").val(
    $(".id_image :checked").map((i,el) => el.value).join(", ") 
) 
});

来源

2017-09-16 10:58:13

https://jsfiddle.net/gerhcm9c/。 @Jons我有复选框，但不重视输入？任何帮助我？ – DinhTv

-1

只需用方括号[]在名称末尾，如果你想使用表单提交，或使用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>

来源

2017-09-16 10:58:36

如何获取输入文本的值无按钮显示。任何帮助我？ – DinhTv

@DinhTv编辑我的代码...你是否在问这样的事情？检查 –

首先，你应该使用复选框名

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

排列标记它会帮助你发布多个值同时

后，对于在检查值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>

来源

2017-09-16 11:04:56

https://jsfiddle.net/7sndfram/1/ @hanish我有复选框，但不重视输入？任何帮助我？ – DinhTv

一个perfecly解决试试这个：

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

来源

2017-09-16 11:24:09 Chandru

jQuery的复选框获取价值的文字输入

回答

相关问题