时间戳

首页 > 解决方案 > 如何使用 jquery 在数组中添加多个字符串？

html - 如何使用 jquery 在数组中添加多个字符串？

问题描述

如何使用 jquery 在一个数组中添加复选框中的选定项？我想把它放在一些 JSON 文件中。代码在这里

<div class="form-group">
    <label for="dayOfWeek" class="col-sm-5 control-label add-node-label">Day
        of Week</label>
    <div class="col-sm-7 add-node-input-holder">
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="MONDAY">
            <label class="form-check-label" for="MONDAY">MONDAY</label>
        </div>
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="TUESDAY">
            <label class="form-check-label" for="TUESDAY">TUESDAY</label>
        </div>
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="WEDNESDAY">
            <label class="form-check-label" for="WEDNESDAY">WEDNESDAY</label>
        </div>
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="THURSDAY">
            <label class="form-check-label" for="THURSDAY">THURSDAY</label>
        </div>
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="FRIDAY">
            <label class="form-check-label" for="FRIDAY">FRIDAY</label>
        </div>
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="SATURDAY">
            <label class="form-check-label" for="SATURDAY">SATURDAY</label>
        </div>
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="SUNDAY">
            <label class="form-check-label" for="SUNDAY">SUNDAY</label>
        </div>
    </div>
</div>

谢谢你的回答

标签： htmljqueryjson

解决方案

您可以使用.map()利用change事件的方法：

$('.day-option input').on('change', function() {
    let selectedDaysArray = $('.day-option input:checked').map((i,ck) => ck.id).get();
    console.log( selectedDaysArray );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label for="dayOfWeek" class="col-sm-5 control-label add-node-label">Day
        of Week</label>
    <div class="col-sm-7 add-node-input-holder">
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="MONDAY">
            <label class="form-check-label" for="MONDAY">MONDAY</label>
        </div>
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="TUESDAY">
            <label class="form-check-label" for="TUESDAY">TUESDAY</label>
        </div>
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="WEDNESDAY">
            <label class="form-check-label" for="WEDNESDAY">WEDNESDAY</label>
        </div>
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="THURSDAY">
            <label class="form-check-label" for="THURSDAY">THURSDAY</label>
        </div>
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="FRIDAY">
            <label class="form-check-label" for="FRIDAY">FRIDAY</label>
        </div>
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="SATURDAY">
            <label class="form-check-label" for="SATURDAY">SATURDAY</label>
        </div>
        <div class="day-option">
            <input type="checkbox" class="form-check-input" id="SUNDAY">
            <label class="form-check-label" for="SUNDAY">SUNDAY</label>
        </div>
    </div>
</div>

推荐阅读