如何在选中复选框时打印它们的名称？

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，但我也有 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>

Answer 2

你可以使用 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 3

点击复选框，您可以获得该复选框的标题。

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

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

Answer 4

请看下面的代码。它使用jquery：

$(document).ready(function() {
  $(".checkbox-inline input[type=checkbox]").click(function() {
    var selectedDays = "";
    var tempArray = []
    $("input:checked").each(function() {
      var name = $(this).val();
      tempArray.push(name);
    });
    selectedDays = tempArray.join(",");

    $(".summary").text(selectedDays);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/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">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>
<br/>
<br/>Summary:
<div class="summary"></div>

Answer 5

点击复选框可以获得该复选框的标题。

  //in Controller
    $scope.CheckBoxes = [{
        value: 'CheckBox1'
    }, {        
        value: 'CheckBox2'
    }, {        
        value: 'CheckBox3'
    }];

    $scope.result = function () {
        return $scope.CheckBoxes.filter(function (el) { return el.checked;        }).map(function (el) { return el.value; }).join(', ');
    }


   // in View
  <div ng-repeat="value in CheckBoxes"><input type="checkbox" ng-model="value.checked">{{ value.value }}</div>
<div>
    {{ result() }}
</div>

Answer 6

您是否考虑过用引导多选替换您的复选框？ http://davidstutz.github.io/bootstrap-multiselect/