Question

我正在制作一个任务管理工具，我的应用程序需要创建重复任务的功能，所以我试图模仿Google Calendar的“重复事件”菜单。这一个：

如您所见，当您选中所需日期的方框时，“摘要”字段会自动更新您选择的日期。我如何使用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>

同样，我使用的技术是使用AngularJS的JavaScript ，但我也有 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

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

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

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

Answer 3

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

<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>

$('#id-of-text-input').on('focus', function() {
   document.body.scrollTop += this.getBoundingClientRect().top - 10
});

Answer 4

你可以使用jQuery DOM选择器:checked，但你不应该这样做。因为它不是真正的角度方式＆＃34;这样做。

你想要的是这样的：

＆＃13;

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(', ');  
  }
});

＆＃13;

<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>

＆＃13;

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

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

如何检查复选框的名称？

6 个答案: