jQuery - 选中/未选中复选框上的动态显示和隐藏按钮，反之亦然[关闭]

Question

尝试：我正在尝试将选中和未选中的复选框映射到按钮显示/隐藏。此外，当我单击映射按钮时切换选中/取消选中复选框。

问题：当我单击其中一个显示的按钮时，所有选中的框都未选中，因此隐藏了所有显示的按钮。

用户界面示例：BestBuy's products filtering feature

我们使用的是 Angular.js，所以如果有更简单的插件可以推荐，那就太好了。

演示：jsFiddle

HTML

<input type="checkbox" value="1GB">1GB<br/>
<input type="checkbox" value="2GB">2GB<br/>
<input type="checkbox" value="4GB">4GB<br/>

<br /><br />

<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla">

<button type="submit" value="1GB">1GB</button>
<button type="submit" value="2GB">2GB</button>
<button type="submit" value="3GB">4GB</button>

jQuery

$("button").hide();
$(":checkbox").change(function() {
    var checkedValues = $(":checkbox:checked").map(function() {
        return this.value;
    }).get();


$("button").hide();
   for (var i = 0; i < checkedValues.length; i++) {

    $("button:contains('" + checkedValues[i] + "')").show();
}
});

$("button").each(function() {
    $(this).click(function() {
  var checkedValues = $(":checkbox:checked").map(function() {
        return this.value;
    }).get();

  $(":checkbox").prop("checked", false); 


        for (var i = 0; i < checkedValues.length; i++) {
               $(":checkbox").prop("checked", false); 
        $("button:contains('" + checkedValues[i] + "')").hide();
   }


})

});

Answer 1

您说您使用的是 angularjs 有点困惑，但是您的所有实现都在 jquery 中。我看到零角度代码，所以如果你确实在使用 angularjs，我只会使用好的旧 ngmodel。见下文。

(function() {
    'use strict';
angular
  .module('myApp', [])
  .controller('myCtrl', myCtrl);

   function myCtrl(){
       /* jshint validthis: true */
       var vm=this;
       vm.dogs = ['Pug', 'Lab', 'Bulldog'];
       vm.birds = ['Hawk', 'Parrot', 'Chicken'];
   } 

})();

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

<div ng-app="myApp">
  <div ng-controller="myCtrl as vm">
   show dogs <input type="checkbox" ng-model="checkbox1">
   show birds <input type="checkbox" ng-model="checkbox2">
    <div class="row" ng-repeat="item in vm.dogs" ng-show="checkbox1">
            {{item}}
      </div>
      <div class="row" ng-repeat="item in vm.birds" ng-show="checkbox2">
            {{item}}
      </div>
    </div>
  </div>

Answer 2

在这里使用 Angular.js demo找到答案

 <div ng-app="sample" ng-controller="SampleController">
 <ul>
 <li>myModel.optionA:{{myModel.optionA}}</li>
 <li>myModel.optionB: {{myModel.optionB}}</li>
</ul>
<form class="form-inline">
<label class="checkbox">                
    <input type="checkbox" ng-model="myModel.optionA"> A
</label>
<label class="checkbox">                
    <input type="checkbox" ng-model="myModel.optionB"> B
</label>
</form>
<div class="btn-group" data-toggle="buttons-checkbox">
 <button type="button" ng-model="myModel.optionA" ng-show="myModel.optionA" 
  class="btn">A</button>
<button type="button" ng-model="myModel.optionB" ng-show="myModel.optionB"  
  class="btn">B</button>
</div>
</div>

JS

angular.module('bootstrap', []).directive('button', function() {
return {
    restrict: 'E',
    require: 'ngModel',
    link: function($scope, element, attr, ctrl) {

        // ignore other kind of button groups (e.g. buttons-radio)
        if (!element.parent('[data-toggle="buttons-checkbox"].btn- 
        group').length) {
            return;
        }

        // set/unset 'active' class when model changes
        $scope.$watch(attr.ngModel, function(newValue, oldValue) {
            element.toggleClass('active', ctrl.$viewValue);
        });

        // update model when button is clicked
        element.bind('click', function(e) {
            $scope.$apply(function(scope) {
                ctrl.$setViewValue(!ctrl.$viewValue);
            });

            // don't let Bootstrap.js catch this event,
            // as we are overriding its data-toggle behavior.
            e.stopPropagation();
          });
      }
    };
});

angular.module('sample', ['bootstrap']);

function SampleController($scope) {
  console.log('model');
   $scope.myModel = {
     optionA: false,
     optionB: true
  };
 }