带有单选按钮和复选框的jQuery切换数组列表答案

【问题标题】：jquery switching array list with radio buttons and checkboxes带有单选按钮和复选框的jQuery切换数组列表
【发布时间】：2015-02-11 02:46:09
【问题描述】：

有什么办法可以做到吗？

我有 2 个单选按钮和 7 个复选框。

<body>
<input type="radio" id="upper">Uppercase
<input type="radio" id="lower">Lowercase<br />
<input type="checkbox" name="days" id="1" data-val=""> Monday
<input type="checkbox" name="days" id="2" data-val=""> Tuesday
<input type="checkbox" name="days" id="3" data-val=""> Wednesday
<input type="checkbox" name="days" id="4" data-val=""> Thursday
<input type="checkbox" name="days" id="5" data-val=""> Friday
<input type="checkbox" name="days" id="6" data-val=""> Saturday
<input type="checkbox" name="days" id="0" data-val=""> Sunday
</body>

当我选择“大写”单选按钮时，我想使用“var DAYS”，并将值设置为“data-val”。

例如，

<input type="checkbox" name="days" id="1" data-val="MON">Monday
<input type="checkbox" name="days" id="2" data-val="TUE">Tuesday
                                   .
                                   .
                                   .
<input type="checkbox" name="days" id="0" data-val="SUN">Sunday

当我选择“小写”时，我想使用“var days”，并将值设置为“data-val”。

<input type="checkbox" name="days" id="1" data-val="mon">Monday
<input type="checkbox" name="days" id="2" data-val="tue">Tuesday
                                   .
                                   .
                                   .
<input type="checkbox" name="days" id="0" data-val="sun">Sunday

我试图按照以下方式实现这一点，但它不起作用。

<script>
var DAYS = ['MON', 'TUE', 'WED', 'THU','FRI', 'SAT', 'SUN'];
var days = ['mon', 'tue', 'wed', 'thu','fri', 'sat', 'sun'];
if ($('#upper').prop('checked')) {
    $.each(DAYS, function (i, value) {
        var ID = parseInt($("input[ type='checkbox' ]").attr('id'));
        if (ID === i) {
            $("[ type='checkbox' ]").attr( 'data-val', value);
        }
    });
else if ($('#lower').prop('checked')) {
    $.each(days, function (i, value) {
        var ID = parseInt($("input[ type='checkbox' ]").attr('id'));
        if (ID === i) {
            $("input[ type='checkbox' ]").attr( 'data-val', value);
        }
    });
}
</script>

谁能帮我完成以下步骤？

请不要因为我的英语不好而发火。感谢您的宝贵时间。

【问题讨论】：

标签： javascript jquery arrays checkbox radio-button

【解决方案1】：

如果您将数组放在一个对象中，您可以使用括号符号来访问它们，这将有助于干燥您的代码。

首先给radio添加一个通用的类和值属性：

<input type="radio" id="upper" value="upper" class="case-toggle">Uppercase
<input type="radio" id="lower" value="lower" class="case-toggle">Lowercase<br />

然后在JS中：

var days = {
    upper: ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'],
    lower: ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun']
}

$('.case-toggle').change(function() {
    $.each(days[$(this).val()], function(i, item) {
        $('input[name="days"]').eq(i).data('val', item);
    });
});

【讨论】：