jQuery復選框獲取值文本輸入

Question

我有列表輸入復選框

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

Answer 1

用jQuery

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

Answer 2

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();

Answer 3

首先，您應該對復選框名稱使用數組符號

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

Answer 4

嘗試這個 ：

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

Answer 5

如果要使用表單提交，請在名稱末尾使用方括號[] ，或在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>