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的複選框獲取價值的文字輸入

回答

相關問題