Fork me on GitHub

Checkboxes and radios get controls

You can check the target or all, of course remove it, toggle the check control, enabled or disabled will be available.

Styling them

If you use the view option, you can also change the appearance with CSS.

Download

You can download the source code from Github.

Implementation

Reading at any point and jQuery and jq.ui.checks.js, and then run after it.

<script src="scripts/lib/jquery-1.7.1.min.js"></script>
<script src="scripts/jq.ui.checks.js"></script>

How to use

If you want to change the look only to the simple, do the following.

HTML

<label for="check1">
  <input type="checkbox" name="check" id="check1" value="1">
  check1
</label>
<label for="check2">
  <input type="checkbox" name="check" id="check2" value="2">
  check2
</label>
<label for="check3">
  <input type="checkbox" name="check" id="check3" value="3">
  check3
</label>
<label for="check4">
  <input type="checkbox" name="check" id="check4" value="4">
  check4
</label>
<label for="check5">
  <input type="checkbox" name="check" id="check5" value="5">
  check5
</label>

CSS

By writing to the simple mess like this.

.ui_check {
  margin-right: 3px;
  border: solid #000 1px;
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #fff;
}
.ui_checked {
  background: #000;
}
.ui_check_disabled {
  opacity: .3;
  filter: alpha(opacity=30);
}

JavaScript

$('input[name="check"]').checkbox({
  view: true
});

If you want to apply to radio buttons, use the radio method instead of checkbox.

$('input[name="radio"]').radio({
  view: true
});

Options

You can change looks if you specify the option when you run and class names. For descriptions of the options available, please refer to the following table.

Key Commentary (Contents of the () is the default value, and left hand is for checkbox, right hand is for radio)
view (false) If you turn to true this option, span element (this is view) that contains the class specified in the uiClass element is appended to the input, the input element will be invisible element.
label (false) If you turn to true this option, data-checkbox-label attribute is to be a label of replaced checkbox/radio.
hideNextSibs (false) If you turn to true this option, next siblings of checkbox/radio is to be hidden.
uiClass (ui_check | ui_radio) Class to add to the element to be added in order to change the look of the element input. You can apply a style to use this class.
labelClass (ui_check_label | ui_radio_label) Class to add to the label element associated with their element input.
checkedClass (ui_checked) Class to be added to the view when the input element has become checked.
disabledClass (ui_check_disabled | ui_radio_disabled) Class to be added to the view when the input element has become disabled.

Using this

$(input).checkbox({
  view: true
});

APIs

Common

Key Commentary (Contents of the () is arguments)
checkOn (id) With the checked attribute to the input element you specified in the id, if there is a view is put a class that is specified by the checkedClass to view.
checkOff (id) Remove the checked attribute from the input element you specified id, if there is a view removes a class that is specified by the checkedClass from view.
enable (id) Disabled attribute is removed from the input element that you have specified in the id, if there is a view removes the class that is specified by the disabledClass from view.
enableAll Remove the disabled attribute from the input element has been the target of all.
disable (id) With the disabled attribute to the input element that you have specified in the id, if there is a view is put a class that is specified by the disabledClass to view.
enableAll Give the disabled attribute to all input elements that are covered.
destroy Get rid of all the events related to checkbox, and radio methods. If there is a view also removes the view.

Using this

var $checkbox = $(input).checkbox();
$checkbox.checkbox('enableAll');

$.fn.checkbox

APIs are only available in the following method check.

Key Commentary
toggleCheckAll To toggle the checked attribute of input elements are specified.
checkOnAll Give a checked attribute to input elements are specified.
checkOffAll Remove a checked attribute from input elements are specified.

Using this

var $checkbox = $(input).checkbox();
$checkbox.checkbox('toggleCheckAll');

Events

Name Commentary (Contents of the () is data)
check:on (data) Fire when a checked attribute is added to a input element.
check:off (data) Fire when removing a checked attribute from a input element.
check:enable (data) Fire when a input element is enabled.
check:disable (data) Fire when a input element is disabled.

data is a object has relational datas.

$(input).bind({
  'check:on': function(ev, data) {
    console.log(data);
  }
});

// data format is following this.
data: {
  $check: $(input),
  $label: $(label),
  $view: $(view),
  disabled: boolean,
  id: input.id,
  state: boolean
}

Checkbox

controls

source code

var $checkbox = $('input[name="check"]').checkbox();

$('#checkonall').on('click', function() {
  $checkbox.checkbox('checkOnAll');
});
$('#checkoffall').on('click', function() {
  $checkbox.checkbox('checkOffAll');
});
$('#togglecheckall').on('click', function() {
  $checkbox.checkbox('toggleCheckAll');
});
$('#enableall').on('click', function() {
  $checkbox.checkbox('enableAll');
});
$('#disableall').on('click', function() {
  $checkbox.checkbox('disableAll');
});
$('#destroy').on('click', function() {
  $checkbox.checkbox('destroy');
});

$checkbox.bind({
  'check:on': function(ev, data) {
    console.log('check:on', data);
  },
  'check:off': function(ev, data) {
    console.log('check:off', data);
  },
  'check:enable': function(ev, data) {
    console.log('check:enable', data);
  },
  'check:disable': function(ev, data) {
    console.log('check:disable', data);
  }
});

with styling

source code

var $checkbox = $('input[name="check"]').checkbox({
  view: true
});

// ...

styled buttons

source code

var $checkbox = $('input[name="check"]').checkbox({
      view: true,
      lable: true,
      hideNextSibs: true
    });

    // ...

Radio

controls

source code

var $radio = $('input[name="radio"]').radio();

// ...

with styling

source code

var $radio = $('input[name="radio"]').radio({
  view: true
});

// ...

styled buttons

source code

var $radio = $('input[name="radio"]').radio({
  view: true,
  label: true,
  hideNextSibs: true
});

// ...

Capable browsers

License

The MIT License

If you've found a bug, etc.

Please pull request to fork a github repository, if possible. I might be able to correspond to the time when there is a difficult case and get written on issues, someone may be able to support.

Regards use at your own risk!

Author

Kazunori Tokuda - http://5509.hatenablog.com, @5509

Thanks