javascript - 如何在选中时打印复选框的名称？

Question

我正在制作一个任务管理工具，我的应用程序需要创建重复任务的功能，因此我尝试模拟 Google 日历的“重复事件”菜单。这个:

如您所见，当您选中所需星期几的复选框时，“摘要”字段会自动更新为您选择的日期。我如何使用 AngularJS 或 JQuery 实现这一点？

我使用 ng-if 完成的其余“摘要”选项，如下所示:

<div ng-if="recurrence_type === 'Weekly'">
    <div ng-if="recurrence_pattern === '1' && !recurrence_frequency && !recurrence_end">
        <p class="form-control-static"><b>Weekly</b></p>
    </div>
    <div ng-if="recurrence_pattern > '1' && !recurrence_frequency && !recurrence_end">
        <p class="form-control-static"><b>Every {{recurrence_pattern}} weeks</b></p>
    </div>
    <div ng-if="recurrence_pattern === '1' && recurrence_frequency && !recurrence_end">
        <p class="form-control-static"><b>Weekly, {{recurrence_frequency}} times</b></p>
    </div>
    <div ng-if="recurrence_pattern > '1' && recurrence_frequency && !recurrence_end">
        <p class="form-control-static"><b>Every {{recurrence_pattern}} weeks,
                                        {{recurrence_frequency}} times</b></p>
    </div>
    <div ng-if="recurrence_pattern === '1' && !recurrence_frequency && recurrence_end">
        <p class="form-control-static"><b>Weekly, until {{recurrence_end}}</b></p>
    </div>
    <div ng-if="recurrence_pattern > '1' && !recurrence_frequency && recurrence_end">
        <p class="form-control-static"><b>Every {{recurrence_pattern}} weeks, until
                                        {{recurrence_end}}</b></p>
    </div>
</div>

地点:

• recurrence_pattern是周数；
• recurrence_frequency是出现的次数；
• recurrence_end 是结束日期。

我的意思是，我可以像目前为止所做的那样，使用 ng-if，但我必须为每个复选框的单一组合，我会整天待在这里。我敢打赌有更简单的方法。

这是我的复选框代码:

<label class="col-sm-3 control-label">Repeat on:</label>
<label class="checkbox-inline">
    <input type="checkbox" id="monday" title="Monday" value="Monday"> M
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="tuesday" title="Tuesday" value="Tuesday"> T
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="wednesday" title="Wednesday" value="Wednesday"> W
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="thursday" title="Thursday" value="Thursday"> T
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="friday" title="Friday" value="Friday"> F
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="saturday" title="Saturday" value="Saturday"> S
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="sunday" title="Sunday" value="Sunday"> S
</label>

同样，我使用的技术是JavaScript with AngularJS，但我也有可用的JQuery，因为我使用的是Bootstrap 3 .

谢谢。

Answer 1

您可以使用 $("input:checked").each() 遍历所有选中的复选框，然后使用 .val()

var answer = $("#SelectedAnswer").val();
$("input:checked").each(function () {
  var id = $(this).val();
  console.log(id);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<label class="col-sm-3 control-label">Repeat on:</label>
<label class="checkbox-inline">
    <input type="checkbox" id="monday" title="Monday" value="Monday" checked> M
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="tuesday" title="Tuesday" value="Tuesday"> T
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="wednesday" title="Wednesday" value="Wednesday" checked> W
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="thursday" title="Thursday" value="Thursday"> T
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="friday" title="Friday" value="Friday" checked> F
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="saturday" title="Saturday" value="Saturday"> S
</label>
<label class="checkbox-inline">
    <input type="checkbox" id="sunday" title="Sunday" value="Sunday"> S
</label>