jQuery - Dynamically show and hide button on checkbox checked/ unchecked, and vise versa

Question

Attempt: I am trying to map a check-box checked & unchecked to a button show/hide. Also, to toggle check/uncheck the check-box when I click the mapped button.

Problem: When I click one of the displayed buttons, all the checked boxed are unchecked thus hiding all the displayed buttons.

UI Example: BestBuy's products filtering feature

We are using Angular.js, so if there is an easier plugin you can recommend, that'd be great.

DEMO: 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();
   }


})

});

score 1 · Answer 1 · answered Jul 23 '18 at 19:38

so a bit confused you say you are using angularjs but then all of your implementation is in jquery. I see zero angular code, so if you are indeed using angularjs I would just use good old ngmodel. see below.

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

so are you actually using angularjs? if you do not want an angularjs solution you may want to remove that and the tag from your question — Bryan Dellinger, Jul 23 '18 at 20:05

score 0 · Answer 2 · answered Jul 23 '18 at 21:28

Found the answer using Angular.js here 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
  };
 }

It would be wiser to choose a name for the directive other than `button`. Otherwise the directive will attach itself to every button in the template including ones that you don't want to act like checkboxes. — georgeawg, Jul 30 '18 at 03:13

jQuery - Dynamically show and hide button on checkbox checked/ unchecked, and vise versa

2 Answers2