Question

有没有办法让这项工作？

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

我试图通过以下方式实现这一点，但它并不是wowrk。

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

有人可以帮我完成以下步骤吗？

请不要担心我的英语不好。谢谢你的时间。

Answer 1

如果将数组放在对象中，可以使用括号表示法访问它们，这将有助于干扰代码。

Firslty向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);
    });
});

带有单选按钮和复选框的jquery切换阵列列表

1 个答案: