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

Posted 2023-05-09

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

【英文标题】：jQuery - Dynamically show and hide button on checkbox checked/ unchecked, and vise versa [closed]

【发布时间】：2018-12-31 07:45:40

【问题描述】：

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

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

用户界面示例：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();
   


)

);

【参考方案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>

【讨论】：

谢谢@Bryan，但这不是我想要的。

那么你真的在使用 angularjs 吗？如果你不想要一个 angularjs 解决方案，你可能想从你的问题中删除它和标签

【参考方案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
  ;
 

【讨论】：

为指令选择一个名称而不是button 会更明智。否则，指令会将自身附加到模板中的每个按钮，包括您不想像复选框一样操作的按钮。