代码之家 › 专栏 › 技术社区 › Mona Coder

获取将组复选框更改为数组的值

jquery javascript

Mona Coder · 技术社区 · 7 年前

我正在做这个演示。
为什么在选中和取消选中复选框时无法获取复选框值?

// find elements
$('input:checkbox[name=product]').on('change', function() {
    var val = '';
    $('input:checkbox[name=product]:checked').each(function() {
        val += $(this).val();
    });
    switch (val) {
        case 'all':
             console.log(val);
            break;
        case 'women':
             console.log(val);
            break;
        case 'men':
             console.log(val);
            break;
	  case 'men':
             console.log(val);
            break;
       }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="product" value="all" checked />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />

2 回复 | 直到 6 年前

Nishant Dixit 7 年前

switch 条件应该出现在每个循环中。

// find elements
$('input:checkbox[name=product]').on('change', function() {
    var valueArray = [];
    $('input:checkbox[name=product]:checked').each(function() {
        var val = $(this).val();
        valueArray.push(val);

        switch (val) {
            case 'all':
                console.log(val);
                break;
            case 'women':
                console.log(val);
                break;
            case 'men':
                console.log(val);
                break;
            case 'men':
                console.log(val);
                break;
        }
    });
    console.log("final checked box array");
    console.log(valueArray);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="product" value="all" checked />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />

Nandita Sharma 7 年前

您只需要控制台记录检查的值,不需要任何开关箱。

// find elements
$('input:checkbox[name=product]').on('change', function() {
    var val = '';

    $('input:checkbox[name=product]:checked').each(function() {
        val = $(this).val();
        console.log(val)
    });
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="product" value="all" checked />All Genders <br />
<input type="checkbox" name="product" value="women" />Women <br />
<input type="checkbox" name="product" value="men" />Men<br />
<input type="checkbox" name="product" value="bi" />Bi<br />