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

jquery switching array list with radio buttons and checkboxes

本文关键字：数组 列表 jQuery 单选按钮 复选框      更新时间：2023-09-26

有什么办法可以做到这一点吗？

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

谁能帮我完成以下步骤？

拜托，不要对我糟糕的英语感到愤怒。谢谢你的时间。

如果你把你的数组放在一个对象里，你可以使用括号符号来访问它们，这将有助于耗尽你的代码。

首先，在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);
    });
});
相关文章：