如何使用Jquery复选框值和类属性设置数组

Question

如何使用Jquery复选框值和类属性设置数组

这是我想要的。
当所有复选框 选中时 jquery alert（
        参数===＆gt; A ===＆gt;值===＆gt; a1，a2，a3，a4，a5
        参数===＆gt; B ===＆gt;值===＆gt; b1，b2，b3，b4，b5
        参数===＆gt; C ===＆gt;值===＆gt; c1，c2，c3，c4，c5
）

所有复选框 未选中

jquery alert（
        参数===＆gt; ===＆GT;值===＆gt;
        参数===＆gt; ===＆GT;值===＆gt;
        参数===＆gt; ===＆GT;值===＆gt;
）
或者jquery警报（
           参数===＆gt; A ===＆gt;值===＆gt; a1，a2
）
或者jquery alert（
           参数===＆gt; B ===＆gt;值===＆gt; b1，b2
）..........等

怎么做呢

HTML

<div class="checkboxes">
 <input type="checkbox" value="a1" class='A'/> a
 <input type="checkbox" value="a2" class='A'/> a
 <input type="checkbox" value="a3" class='A'/> a
 <input type="checkbox" value="a4" class='A'/> a
 <input type="checkbox" value="a5" class='A'/> a
 <input type="checkbox" value="a6" class='A'/> a
</div>
<br>
<div class="checkboxes">
 <input type="checkbox" value="b1" class='B'/> b
 <input type="checkbox" value="b2" class='B'/> b
 <input type="checkbox" value="b3" class='B'/> b
 <input type="checkbox" value="b4" class='B'/> b
 <input type="checkbox" value="b5" class='B'/> b
 <input type="checkbox" value="b6" class='B'/> b
</div>
<br>
<div class="checkboxes">
 <input type="checkbox" value="c1" class='C'/> c
 <input type="checkbox" value="c2" class='C'/> c
 <input type="checkbox" value="c3" class='C'/> c
 <input type="checkbox" value="c4" class='C'/> c
 <input type="checkbox" value="c5" class='C'/> c
 <input type="checkbox" value="c6" class='C'/> c
</div>

jquery的

 $(document).ready(function () {

$('.checkboxes input[type="checkbox"]').change(function () {
    var mycheck = new Array();
    var param = $(this).attr('class');

    $(".checkboxes input[type='checkbox']:checked").each(function () {
        if ($(this).is(':checked')) {
            mycheck.push( $(this).attr("value")); 
        }
    });
    alert("value ===> " + mycheck + " ===> parameter ===> "+param);
  });
 });

SEEDEMO

Answer 1

您可以这样做：

＆＃13;

＆＃13;

$(document).ready(function () {

    $('.checkboxes input[type="checkbox"]').change(function () {
        var A = new Array();
        var B = new Array();
        var C = new Array();
        var param = $(this).attr('class');
        $(" input[type='checkbox']:checked").each(function () {
            if ($(this).hasClass('A')) {
                A.push($(this).attr("value"));
            }
            if ($(this).hasClass('B')) {
                B.push($(this).attr("value"));
            }
            if ($(this).hasClass('C')) {
                C.push($(this).attr("value"));
            }
            });
            //alert("value ===> " + mycheck + " ===> parameter ===> "+param);
            alert("parameter ===> A ===> value ===>" + A +
                  "\nparameter ===> B ===> value ===>" +B +
                  "\nparameter ===> C ===> value ===>" +C 
                 );
            });
        });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkboxes">
    <input type="checkbox" value="a1" class='A'/> a
    <input type="checkbox" value="a2" class='A'/> a
    <input type="checkbox" value="a3" class='A'/> a
    <input type="checkbox" value="a4" class='A'/> a
    <input type="checkbox" value="a5" class='A'/> a
    <input type="checkbox" value="a6" class='A'/> a
</div>
<br>
<div class="checkboxes">
    <input type="checkbox" value="b1" class='B'/> b
    <input type="checkbox" value="b2" class='B'/> b
    <input type="checkbox" value="b3" class='B'/> b
    <input type="checkbox" value="b4" class='B'/> b
    <input type="checkbox" value="b5" class='B'/> b
    <input type="checkbox" value="b6" class='B'/> b
</div>
<br>
<div class="checkboxes">
    <input type="checkbox" value="c1" class='C'/> c
    <input type="checkbox" value="c2" class='C'/> c
    <input type="checkbox" value="c3" class='C'/> c
    <input type="checkbox" value="c4" class='C'/> c
    <input type="checkbox" value="c5" class='C'/> c
    <input type="checkbox" value="c6" class='C'/> c
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

或者更动态，使用.map和.toArray：

$('.checkboxes input[type="checkbox"]').change(function () {

    var output = '';

    // loop over your .checkboxes, which all seem to share the same classname
    $('.checkboxes').each(function() {
        // find the classname
        var param = $(this).find('input').attr('class');
        // map your checked checkbox values to an array
        var mycheck = $(this).find(':checkbox:checked').map(function() {
            return ([$(this).val()]);
        }).toArray();
        // only when there are values to show in this array
        if (mycheck.length) {
            // build the output string
            output += "value ===> " + mycheck + " ===> parameter ===> " + param + "\n";
        }
    });

    // output the string
    alert(output);

});

Fiddle

Answer 3

使用$.map()在代码和数据结构方面更加清洁的另一个：

＆＃13;

＆＃13;

function createObject() {
    var arr = {};
    $(".checkboxes").each(function() {
        var $inputs = $(this).find(" > input");
        arr[$inputs[0].className] = $inputs.map(function() {
            if (this.checked) {
                return this.value;
            }
        }).get();
    });    
    alert (JSON.stringify(arr, null, 4));
}

//createObject();

$(":checkbox").on("change", createObject);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkboxes">
 <input type="checkbox" value="a1" class='A'/> a
 <input type="checkbox" value="a2" class='A'/> a
 <input type="checkbox" value="a3" class='A'/> a
 <input type="checkbox" value="a4" class='A'/> a
 <input type="checkbox" value="a5" class='A'/> a
 <input type="checkbox" value="a6" class='A'/> a
</div>
<br>
<div class="checkboxes">
 <input type="checkbox" value="b1" class='B'/> b
 <input type="checkbox" value="b2" class='B'/> b
 <input type="checkbox" value="b3" class='B'/> b
 <input type="checkbox" value="b4" class='B'/> b
 <input type="checkbox" value="b5" class='B'/> b
 <input type="checkbox" value="b6" class='B'/> b
</div>
<br>
<div class="checkboxes">
 <input type="checkbox" value="c1" class='C'/> c
 <input type="checkbox" value="c2" class='C'/> c
 <input type="checkbox" value="c3" class='C'/> c
 <input type="checkbox" value="c4" class='C'/> c
 <input type="checkbox" value="c5" class='C'/> c
 <input type="checkbox" value="c6" class='C'/> c
</div>

＆＃13;

＆＃13;

＆＃13;