如何使用jQuery從復選框組獲取檢查值

Question

我想獲取復選框組中所有選中的復選框的值。

 <div class="checkbox-group">
<div class="checkbox">
<label for="checkbox-group-1501481486714-preview-0">
<input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox-group-1501481486714-preview-0" value="physics" type="checkbox" checked="checked">physics</label>
</div>
<div class="checkbox"><label for="checkbox-group-1501481486714-preview-1"><input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox-group-1501481486714-preview-1" value="math" type="checkbox">math</label>
</div>
<div class="checkbox"><label for="checkbox-group-1501481486714-preview-2">
<input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox-group-1501481486714-preview-2" value="chemistry" type="checkbox">chemistry</label>
</div>
</div>

以下是腳本代碼

    document.getElementById('btn').addEventListener('click', function() {

        $(document).ready(function(){

        var x = $(".userform").find(":input");
        $.each(x, function(i, field){
            if(field.type == "text")
            {
                $("#results").append("name:   "+field.name + ":       " +"Value:    "+ field.value +"<br>");
            }

            else if(field.type == "checkbox")
            {
             var result = $('input[type="checkbox"]:checked');

             if(result.length > 0)
                {
                $("#results").append("this is checked     "+"name:   "+field.name + ":       " +"Value:    "+ field.value +"<br>");
            }
            else{

                $("#results").append("this is unchecked");
            }
            }


        });

});


});

當我全部取消選中時，它將給出此輸出

this is unchecked 
this is unchecked 
this is unchecked

但是當我檢查任何它給出此輸出

this is checked name: checkbox-group-1500619332922: Value: on
this is checked name: checkbox-group-1500619332922: Value: on
this is checked name: checkbox-group-1500619332922: Value: on

提前致謝

Answer 1

您可以執行以下簡單循環：

var values = [];
$('input[type="checkbox"]:checked').each(function(i,v){
  values.push($(v).val());
});

如果只想組成一個小組，可以說.group然后將選擇器更改為

$('.group input[type="checkbox"]:checked')

演示：

 $('input[type="checkbox"]').change(function() { $('.checkbox-group').each(function() { var values = []; $(this).find('input[type="checkbox"]:checked').each(function(i, v) { values.push($(v).val()); }); console.log(values); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="checkbox-group"> <div class="checkbox"> <label for="checkbox-group-1501481486714-preview-0"> <input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox- group-1501481486714-preview-0" value="option-1" type="checkbox" checked="checked">Option 1</label> </div> <div class="checkbox"><label for="checkbox-group-1501481486714-preview-1"> <input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox- group-1501481486714-preview-1" value="option-2" type="checkbox">Option 2</label> </div> </div> <div class="checkbox-group"> <div class="checkbox"> <label for="checkbox-group-1501481486714-preview-0"> <input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox- group-1501481486714-preview-0" value="option-1 group-2" type="checkbox" checked="checked">Option 1</label> </div> <div class="checkbox"><label for="checkbox-group-1501481486714-preview-1"> <input name="checkbox-group-1501481486714-preview[]" class="" id="checkbox- group-1501481486714-preview-1" value="option-2 group-2" type="checkbox">Option 2</label> </div> </div> 

Answer 2

您可以嘗試在下面的演示代碼中獲取所選值。

var demo = $("input[type="checkbox"]:checked").map(function() { return $(this).val(); }).get();

你可以試試。