检查时如何打印复选框的名称？

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，但是我必须为每一个复选框的组合做一个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和AngularJS，但由于我使用的是引导3，所以也有JQuery可用。

谢谢。

Answer 1

您可以使用jQuery DOM选择器:checked，但不应该使用。因为这并不是真正的“角度方式”。

你想要的是这样的东西：

​

angular.module('app', [])

.controller('ctrl', function($scope) {
  $scope.values = [{
      value: 'test1'
  }, {
      value: 'test2'
  }, {
      value: 'test3'
  }];
  
  $scope.result = function() {
    return $scope.values.filter(function(el) { return el.checked; }).map(function(el) { return el.value; }).join(', ');  
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="ctrl">
    <div ng-repeat="value in values"><input type="checkbox" ng-model="value.checked">{{ value.value }}</div>
  
    <div>
      {{ result() }}
    </div>
  </div>
</div>

​

Answer 2

您可以使用$("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>

​

Answer 3

在单击复选框时，您可以获得该复选框的标题。

<input type="checkbox" id="monday" title="Monday" value="Monday">

$scope.summary = "";
$("input:checked").each(function () {
  var title = $(this).attr("title");
  $scope.summary+= title;
});