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

Question

Is there any way to make this work? 有什么办法可以使这项工作吗？

I have 2 radio buttons and 7 checkboxes. 我有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>

When I chose "Uppercase" radio button, I'd like to use "var DAYS", and set value as "data-val". 当我选择“大写”单选按钮时，我想使用“ var DAYS”，并将值设置为“ data-val”。

For example, 例如，

<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

And when I chose "Lowercase", I'd like to use "var days", and set value as "data-val". 当我选择“小写”时，我想使用“ 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

I tried to make this happen as following way, but it doesn't 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>

Could anyone help me with the following steps? 有人可以按照以下步骤帮助我吗？

Please, no flames about my bad English. 拜托，不要因为我的英语不好而发火。 Thank you for your time. 感谢您的时间。

Answer 1

If you put your arrays inside an object you can use bracket notation to access them which will help to DRY up your code. 如果将数组放在对象中，则可以使用方括号表示法访问它们，这有助于使代码干燥。

Firslty add a common class and value attribute to the radio : 首先添加一个通用的class和value属性到radio ：

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

Then in JS: 然后在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 个解决方案

解决方案1
2 已采纳 2014-12-12 11:40:22

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-12-12 11:40:22

解决方案1
2 已采纳 2014-12-12 11:40:22