59428


checkboxが複数選択された場合と単体の場合で表示されるボタンを変えたいのですが、  
どのようにしたらよいかわからず困っています。

スニペットに記載したもので、  
checkboxにチェックをいれると`tab1`のボタンを表示させることができました。  
(こちらのスニペットでは、うまくボタンが表示させることができませんでした。。)

ただ、複数選択した場合は`tab2`のボタンを表示させたいのですが、  
どのようにしたらよいかご教授いただけますと大変助かります。

何卒よろしくお願いいたします。

**参考にしたページ**  
[iCheckを利用時のチェックの有る無しで表示を切り替える](https://hacknote.jp/archives/16905/)

下記のように修正してみたことにより、  
単体チェック、複数チェックによってボタンの表示内容を変えることはできました。

[code]

    $('input').on('ifChecked', function(event){
      var check_count = $('.check :checked').length;
    
      if (check_count == 1) {
        $('#tab1').show().addClass('active');
      } else if (check_count > 1 ) {
        $('#tab2').show().addClass('active');
        $('#tab1').hide().removeClass('active');
      }
    });
    
    $('input').on('ifUnchecked', function(event){
      $('#tab1').hide().removeClass('active');
      $('#tab2').hide().removeClass('active');
    });
    
[/code]

ただ、チェックを外した時にボタンの表示内容をかえるのがうまくできません。  
今はチェックを外すと、tab1/tab2のボタンがすべて消えてしまいます。

やりたいことは、  
▼複数チェックされていたとき、  
すべてのチェックが外された時は、tab1/tab2非表示。  
チェックが外されて1個のみチェックされている時は、tab1表示。  
チェックが外されても2個以上チェックされている時は、tab２表示。

▼単体チェックされていたとき、  
すべてのチェックが外された時は、tab1/tab2が非表示。

[code]

    /*!
     * iCheck v1.0.1, http://git.io/arlzeA
     * =================================
     * Powerful jQuery and Zepto plugin for checkboxes and radio buttons customization
     *
     * (c) 2013 Damir Sultanov, http://fronteed.com
     * MIT Licensed
     */
    
    (function($) {
    
      // Cached vars
      var _iCheck = 'iCheck',
        _iCheckHelper = _iCheck + '-helper',
        _checkbox = 'checkbox',
        _radio = 'radio',
        _checked = 'checked',
        _unchecked = 'un' + _checked,
        _disabled = 'disabled',
        _determinate = 'determinate',
        _indeterminate = 'in' + _determinate,
        _update = 'update',
        _type = 'type',
        _click = 'click',
        _touch = 'touchbegin.i touchend.i',
        _add = 'addClass',
        _remove = 'removeClass',
        _callback = 'trigger',
        _label = 'label',
        _cursor = 'cursor',
        _mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini|silk/i.test(navigator.userAgent);
    
      // Plugin init
      $.fn[_iCheck] = function(options, fire) {
    
        // Walker
        var handle = 'input[type="' + _checkbox + '"], input[type="' + _radio + '"]',
          stack = $(),
          walker = function(object) {
            object.each(function() {
              var self = $(this);
    
              if (self.is(handle)) {
                stack = stack.add(self);
              } else {
                stack = stack.add(self.find(handle));
              }
            });
          };
    
        // Check if we should operate with some method
        if (/^(check|uncheck|toggle|indeterminate|determinate|disable|enable|update|destroy)$/i.test(options)) {
    
          // Normalize method's name
          options = options.toLowerCase();
    
          // Find checkboxes and radio buttons
          walker(this);
    
          return stack.each(function() {
            var self = $(this);
    
            if (options == 'destroy') {
              tidy(self, 'ifDestroyed');
            } else {
              operate(self, true, options);
            }
              // Fire method's callback
            if ($.isFunction(fire)) {
              fire();
            }
          });
    
        // Customization
        } else if (typeof options == 'object' || !options) {
    
          // Check if any options were passed
          var settings = $.extend({
              checkedClass: _checked,
              disabledClass: _disabled,
              indeterminateClass: _indeterminate,
              labelHover: true,
              aria: false
            }, options),
    
            selector = settings.handle,
            hoverClass = settings.hoverClass || 'hover',
            focusClass = settings.focusClass || 'focus',
            activeClass = settings.activeClass || 'active',
            labelHover = !!settings.labelHover,
            labelHoverClass = settings.labelHoverClass || 'hover',
    
            // Setup clickable area
            area = ('' + settings.increaseArea).replace('%', '') | 0;
    
          // Selector limit
          if (selector == _checkbox || selector == _radio) {
            handle = 'input[type="' + selector + '"]';
          }
            // Clickable area limit
          if (area < -50) {
            area = -50;
          }
            // Walk around the selector
          walker(this);
    
          return stack.each(function() {
            var self = $(this);
    
            // If already customized
            tidy(self);
    
            var node = this,
              id = node.id,
    
              // Layer styles
              offset = -area + '%',
              size = 100 + (area * 2) + '%',
              layer = {
                position: 'absolute',
                top: offset,
                left: offset,
                display: 'block',
                width: size,
                height: size,
                margin: 0,
                padding: 0,
                background: '#fff',
                border: 0,
                opacity: 0
              },
    
              // Choose how to hide input
              hide = _mobile ? {
                position: 'absolute',
                visibility: 'hidden'
              } : area ? layer : {
                position: 'absolute',
                opacity: 0
              },
    
              // Get proper class
              className = node[_type] == _checkbox ? settings.checkboxClass || 'i' + _checkbox : settings.radioClass || 'i' + _radio,
    
              // Find assigned labels
              label = $(_label + '[for="' + id + '"]').add(self.closest(_label)),
    
              // Check ARIA option
              aria = !!settings.aria,
    
              // Set ARIA placeholder
              ariaID = _iCheck + '-' + Math.random().toString(36).replace('0.', ''),
    
              // Parent & helper
              parent = '<div class="' + className + '" ' + (aria ? 'role="' + node[_type] + '" ' : ''),
              helper;
    
            // Set ARIA "labelledby"
            if (label.length && aria) {
              label.each(function() {
                parent += 'aria-labelledby="';
    
                if (this.id) {
                  parent += this.id;
                } else {
                  this.id = ariaID;
                  parent += ariaID;
                }
    
                parent += '"';
              });
            }
              // Wrap input
            parent = self.wrap(parent + '/>')[_callback]('ifCreated').parent().append(settings.insert);
    
            // Layer addition
            helper = $('<ins class="' + _iCheckHelper + '"/>').css(layer).appendTo(parent);
    
            // Finalize customization
            self.data(_iCheck, {o: settings, s: self.attr('style')}).css(hide);
            !!settings.inheritClass && parent[_add](node.className || '');
            !!settings.inheritID && id && parent.attr('id', _iCheck + '-' + id);
            parent.css('position') == 'static' && parent.css('position', 'relative');
            operate(self, true, _update);
    
            // Label events
            if (label.length) {
              label.on(_click + '.i mouseover.i mouseout.i ' + _touch, function(event) {
                var type = event[_type],
                  item = $(this);
    
                // Do nothing if input is disabled
                if (!node[_disabled]) {
    
                  // Click
                  if (type == _click) {
                    if ($(event.target).is('a')) {
                      return;
                    }
                    operate(self, false, true);
    
                  // Hover state
                  } else if (labelHover) {
    
                    // mouseout|touchend
                    if (/ut|nd/.test(type)) {
                      parent[_remove](hoverClass);
                      item[_remove](labelHoverClass);
                    } else {
                      parent[_add](hoverClass);
                      item[_add](labelHoverClass);
                    }
                  }
                    if (_mobile) {
                    event.stopPropagation();
                  } else {
                    return false;
                  }
                }
              });
            }
              // Input events
            self.on(_click + '.i focus.i blur.i keyup.i keydown.i keypress.i', function(event) {
              var type = event[_type],
                key = event.keyCode;
    
              // Click
              if (type == _click) {
                return false;
    
              // Keydown
              } else if (type == 'keydown' && key == 32) {
                if (!(node[_type] == _radio && node[_checked])) {
                  if (node[_checked]) {
                    off(self, _checked);
                  } else {
                    on(self, _checked);
                  }
                }
                  return false;
    
              // Keyup
              } else if (type == 'keyup' && node[_type] == _radio) {
                !node[_checked] && on(self, _checked);
    
              // Focus/blur
              } else if (/us|ur/.test(type)) {
                parent[type == 'blur' ? _remove : _add](focusClass);
              }
            });
    
            // Helper events
            helper.on(_click + ' mousedown mouseup mouseover mouseout ' + _touch, function(event) {
              var type = event[_type],
    
                // mousedown|mouseup
                toggle = /wn|up/.test(type) ? activeClass : hoverClass;
    
              // Do nothing if input is disabled
              if (!node[_disabled]) {
    
                // Click
                if (type == _click) {
                  operate(self, false, true);
    
                // Active and hover states
                } else {
    
                  // State is on
                  if (/wn|er|in/.test(type)) {
    
                    // mousedown|mouseover|touchbegin
                    parent[_add](toggle);
    
                  // State is off
                  } else {
                    parent[_remove](toggle + ' ' + activeClass);
                  }
                    // Label hover
                  if (label.length && labelHover && toggle == hoverClass) {
    
                    // mouseout|touchend
                    label[/ut|nd/.test(type) ? _remove : _add](labelHoverClass);
                  }
                }
                  if (_mobile) {
                  event.stopPropagation();
                } else {
                  return false;
                }
              }
            });
          });
        } else {
          return this;
        }
      };
    
      // Do something with inputs
      function operate(input, direct, method) {
        var node = input[0],
          state = /er/.test(method) ? _indeterminate : /bl/.test(method) ? _disabled : _checked,
          active = method == _update ? {
            checked: node[_checked],
            disabled: node[_disabled],
            indeterminate: input.attr(_indeterminate) == 'true' || input.attr(_determinate) == 'false'
          } : node[state];
    
        // Check, disable or indeterminate
        if (/^(ch|di|in)/.test(method) && !active) {
          on(input, state);
    
        // Uncheck, enable or determinate
        } else if (/^(un|en|de)/.test(method) && active) {
          off(input, state);
    
        // Update
        } else if (method == _update) {
    
          // Handle states
          for (var state in active) {
            if (active[state]) {
              on(input, state, true);
            } else {
              off(input, state, true);
            }
          }
        } else if (!direct || method == 'toggle') {
    
          // Helper or label was clicked
          if (!direct) {
            input[_callback]('ifClicked');
          }
            // Toggle checked state
          if (active) {
            if (node[_type] !== _radio) {
              off(input, state);
            }
          } else {
            on(input, state);
          }
        }
      }
        // Add checked, disabled or indeterminate state
      function on(input, state, keep) {
        var node = input[0],
          parent = input.parent(),
          checked = state == _checked,
          indeterminate = state == _indeterminate,
          disabled = state == _disabled,
          callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled',
          regular = option(input, callback + capitalize(node[_type])),
          specific = option(input, state + capitalize(node[_type]));
    
        // Prevent unnecessary actions
        if (node[state] !== true) {
    
          // Toggle assigned radio buttons
          if (!keep && state == _checked && node[_type] == _radio && node.name) {
            var form = input.closest('form'),
              inputs = 'input[name="' + node.name + '"]';
    
            inputs = form.length ? form.find(inputs) : $(inputs);
    
            inputs.each(function() {
              if (this !== node && $(this).data(_iCheck)) {
                off($(this), state);
              }
            });
          }
            // Indeterminate state
          if (indeterminate) {
    
            // Add indeterminate state
            node[state] = true;
    
            // Remove checked state
            if (node[_checked]) {
              off(input, _checked, 'force');
            }
              // Checked or disabled state
          } else {
    
            // Add checked or disabled state
            if (!keep) {
              node[state] = true;
            }
              // Remove indeterminate state
            if (checked && node[_indeterminate]) {
              off(input, _indeterminate, false);
            }
          }
            // Trigger callbacks
          callbacks(input, checked, state, keep);
        }
          // Add proper cursor
        if (node[_disabled] && !!option(input, _cursor, true)) {
          parent.find('.' + _iCheckHelper).css(_cursor, 'default');
        }
          // Add state class
        parent[_add](specific || option(input, state) || '');
    
        // Set ARIA attribute
        disabled ? parent.attr('aria-disabled', 'true') : parent.attr('aria-checked', indeterminate ? 'mixed' : 'true');
    
        // Remove regular state class
        parent[_remove](regular || option(input, callback) || '');
      }
        // Remove checked, disabled or indeterminate state
      function off(input, state, keep) {
        var node = input[0],
          parent = input.parent(),
          checked = state == _checked,
          indeterminate = state == _indeterminate,
          disabled = state == _disabled,
          callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled',
          regular = option(input, callback + capitalize(node[_type])),
          specific = option(input, state + capitalize(node[_type]));
    
        // Prevent unnecessary actions
        if (node[state] !== false) {
    
          // Toggle state
          if (indeterminate || !keep || keep == 'force') {
            node[state] = false;
          }
            // Trigger callbacks
          callbacks(input, checked, callback, keep);
        }
          // Add proper cursor
        if (!node[_disabled] && !!option(input, _cursor, true)) {
          parent.find('.' + _iCheckHelper).css(_cursor, 'pointer');
        }
          // Remove state class
        parent[_remove](specific || option(input, state) || '');
    
        // Set ARIA attribute
        disabled ? parent.attr('aria-disabled', 'false') : parent.attr('aria-checked', 'false');
    
        // Add regular state class
        parent[_add](regular || option(input, callback) || '');
      }
        // Remove all traces
      function tidy(input, callback) {
        if (input.data(_iCheck)) {
    
          // Remove everything except input
          input.parent().html(input.attr('style', input.data(_iCheck).s || ''));
    
          // Callback
          if (callback) {
            input[_callback](callback);
          }
            // Unbind events
          input.off('.i').unwrap();
          $(_label + '[for="' + input[0].id + '"]').add(input.closest(_label)).off('.i');
        }
      }
        // Get some option
      function option(input, state, regular) {
        if (input.data(_iCheck)) {
          return input.data(_iCheck).o[state + (regular ? '' : 'Class')];
        }
      }
        // Capitalize some string
      function capitalize(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
      }
        // Executable handlers
      function callbacks(input, checked, callback, keep) {
        if (!keep) {
          if (checked) {
            input[_callback]('ifToggled');
          }
            input[_callback]('ifChanged')[_callback]('if' + capitalize(callback));
        }
      }
    })(window.jQuery || window.Zepto);
    
    
    // checkboの状態によってボタンを表示・非表示
    $('input').on('ifChecked', function(event){
      var check_count = $('.check :checked').length;
    
      if (check_count == 1) {
        $('#tab1').show().addClass('active');
      } else if (check_count > 1 ) {
        $('#tab2').show().addClass('active');
        $('#tab1').hide().removeClass('active');
      }
    });
    
    $('input').on('ifUnchecked', function(event){
      $('#tab1').hide().removeClass('active');
      $('#tab2').hide().removeClass('active');
    });
[/code]

[code]

    #tab1 {
      display: none;
    }
    #tab2 {
      display: none;
    }
[/code]

[code]

    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
     <!-- DataTables -->
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
      
     <section class="content container-fluid">
      <div class="box box-primary">
        <div class="box-header">
          <div id="tab1">
            <button>B</button>
            <button>C</button>
          </div>
          <div id="tab2">
            <button>D</button>
            <button>E</button>
          </div>   
         </div>
      </div>
       <div class="box-body">
         <div class="table-responsive">
            <table class="table table-bordered dataTable">
              <thead>
                <tr>
                  <th></th>
                  <th>id</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>
                    <input type="checkbox" class="check">
                  </td>
                  <td>1</td>
                </tr>
                <tr>
                  <td>
                    <input type="checkbox" class="check">
                  </td>
                  <td>2</td>
                </tr>
                <tr>
                  <td>
                    <input type="checkbox" class="check">
                  </td>
                  <td>3</td>
                </tr> 
              </tbody>
            </table>
          </div>
        </div>
      </section>
[/code]


CC BY-SA 4.0
2019-09-27T00:23:32.470
59309
2019-10-03T05:42:43.483
2019-09-27T06:41:45.313
35901
35901
question
jquery
checkboxが複数選択された場合と単体の場合で表示されるボタンをかえたい

[code]

    $('input').on('ifChecked', updateButtons);
    $('input').on('ifUnchecked', updateButtons);
    
    function updateButtons(event) {
      var check_count = $('.icheckbox_flat-blue :checked').length;
      if (check_count == 0) {
        $('#tab1').hide().removeClass('active');
        $('#tab2').hide().removeClass('active');
      } else if (check_count == 1) {
        $('#tab1').show().addClass('active');
        $('#tab2').hide().removeClass('active');
      } else {
        $('#tab1').hide().removeClass('active');
        $('#tab2').show().addClass('active');
      }
    }
    
[/code]

上記のようにしたら、希望の動作になった。


CC BY-SA 4.0
2019-10-03T05:42:43.483
59428
2019-10-03T05:42:43.483
35901
59309
answer