jQuery plugin for styling checkboxes and radio-buttons

Hi There,

I have tried to put check box

<ul>
 <li>
 <label><input type="checkbox" name="Overall" value="0" id="kiran" />Overall</label>
 </li>

 <li>
 <label><input type="checkbox" name="bussiness" value="1" id="arun" />Overall</label>
 </li>
<.ul>
</code>

and Visually the selection is working but i checkd e the input box is $('#kiran').is(":checked") its giving false on both condition.

http://api.jquery.com/prop/

Example of valid usage:

$( "input" ).prop( "disabled", false );
$( "input" ).prop( "checked", true );

May be a reason of bug #10

I used your plugin to prettify my radio buttons, only i found one penalty. I lost my original working of code. I Expect the code to fire on change event when i click on the radio button, but this no longer is true. instead in listens to the onchange event of the hidden radio button and acts accordingly, but not backwards. can you please fix this?

I m unable to select and unselect checkboxes programmatically with minified version of checkRadio.js. My code works fine with the original version of checkRadio.js.

Here is my code :

<script>
        $(function () {
            $("input[type='radio'], input[type='checkbox']").ionCheckRadio();
        });

        function subscribeAll(flag) {
            if (flag) {
                $('.dingding input:checkbox').prop("checked", true).trigger("stateChanged");
            }
        } 

</script>
<label><input id="select-all" onchange="subscribeAll(this.checked)" type="checkbox" name="think" value="4"/> Select All</label>
<br/><br/>
<div class="dingding">
    <label><input type="checkbox" name="think" value="0"/> Opion</label>
    <br/>
    <label><input type="checkbox" name="think" value="3"/> Health</label>
    <br/>
</div>

The style of the element is not working when using the name as an array

<input name="field[]" id="checkboxes-0" value="1" type="checkbox">

копируем css класс от основного элемента

при использовании tbs иногда необходимо указать класс css. например :

<!-- было -->
<input type="radio" value="" class="col-sm-12 col-md-12" name="myRadio">
<!-- стало -->
<span id="icr-3" class="icr enabled checked col-sm-12 col-md-12">
    <span class="icr__radio"></span>
    <span class="icr__text">myLable</span>
</span>

Make the rendered form compatible with Rails form builder, when Rails render a checkbox:

<label id='remember-me'>
   <%= f.check_box :remember_me %>
   <%= Spree.t(:remember_me) %>
</label>

it will put a hidden input before the checkbox, like

<label id='remember-me'>
  <input name="spree_user[remember_me]" type="hidden" value="0" />
  <input id="spree_user_remember_me" name="spree_user[remember_me]" type="checkbox" value="1" />
  Remember me
</label>

So if the user didn't check the checkbox, it will send the hidden '0' to the server. The order of the hidden and checkbox inputs must be preserved. If we call

$input.appendTo($container);
$label.appendTo($container);

The hidden input will be after the checkbox, then when the server receives the params, the value will always be 0. So remove the line

$input.appendTo($container);

to preserve the order of these two inputs.

Не вижу необходимости триггерить событие «stateChanged» у всех радиобаттонов группы — в частности у тех, у которых состояние не меняется.

Пример. Три радиобаттона. Ни один не выбран. Я выбираю второй. В итоге событие «stateChanged» срабатывает у каждого из трёх радиобаттонов, хотя у №1 и №3 state совсем даже не changed.

Here is a bug with multiple checkboxes.

You can reproduce it this way, add this code to your page and init a plugin

<label><input type="checkbox" name="multiple[]" id="first" value="1"> First</label>
<label><input type="checkbox" name="multiple[]" id="second" value="2"> Second</label>
<label><input type="checkbox" name="multiple[]" id="third" value="3"> Third</label>

Hi, I'm looking for a way to change which element of a radio button group is checked via JS. But it doesn't seem to work. The suggested way to trigger a change event doesnt work

http://ionden.com/a/plugins/ion.checkRadio/demo.html

<label class="icr-label">
<span class="icr-item type_radio"></span>
<span class="icr-hidden"><input class="icr-input" type="radio" name="myGroupRadio" value="0" /></span>
				    <span class="icr-text">Metric</span>
				</label>
				  <label class="icr-label">
				    <span class="icr-item type_radio"></span>
				    <span class="icr-hidden"><input class="icr-input" type="radio" name="myGroupRadio" value="1" /></span>
				    <span class="icr-text">Imperial</span>
				</label>

<script>
  $('.icr-input').ionCheckRadio();
</script>

<script>
   //trying to set a first radio to checked via js
   $($(".icr-input")[0]).trigger("change");
</script>

Hi,

please take a look at the generated dom markup: http://codepen.io/anon/pen/Mwryvm

This behavior has changed in version 2.0. In version 1.1.0 i was able to read the html5 data attributes.

This markup:

<div class="demo__block-element">
  <input type="radio" name="reading" value="1" id="reading_1" data-foo="bar1" />
  <label for="reading_1">Sometimes</label>
</div>

is generating:

<div class="demo__block-element">
<label class="icr-label">
<span class="icr-item type_radio"></span>
<span class="icr-hidden"><input type="radio" value="1" name="reading" class="icr-input "></span>   <span class="icr-text">Sometimes</span>
</label>
</div>

data-foo="bar1" has been removed :-(

Hello Den,

So, here is the flow:

1. Add dynamically the new input.
2. Try to apply init ionCheckRadion to all checkbox and radio. Example: http://jsfiddle.net/Stafox/u2L66mdv/

Note: when you try to init ionCheckRadio on new element only - all works as expected: http://jsfiddle.net/Stafox/s3qLjyuj/