ionden / ion.checkradio

jQuery plugin for styling checkboxes and radio-buttons

Hi there 👋

Welcome to the home of your favorite Range Slider library! With over 10 years of active maintenance, the Ion.RangeSlider repo continues to evolve and serve the community.

Our library is the culmination of many years of dedicated effort, and we are excited to announce that version 3.0 is under development! This update is based on TypeScript and features zero dependencies.

If you appreciate the work we do, consider showing your support in one of the following ways:

You can buy me a coffee or support my work in other ways:

• ☕ Buy me a coffee
• 🤝 Sponsor my work

You can also:

• 📫 Work with me
• 🔭 Follow me

ion.checkradio's Issues

Visually Its working but functional Not

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.

Лишние события

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

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

Unable init ionCheckRadio when trying to apply to already initiated element

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/

Click on a selected radio change to unselected

Is there a way to not unselect a radio input when is already selected and you click on it?

Like the normal html radio input works?

When using name as an array

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

losing triggers on original input fields

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?

Не отчекиваются чекбоксы в mozille, опере и ie11

Опытным путём выяснил что это из-за версии jquery. Баг наблюдается в версии jquery 2.1.0. В версии 1.11.1 всё ок

Issue with multiple checkboxes

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>

Change "checked" value of radio group programmatically does not seem to work

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>

Select and unselect checkboxes programmatically not working with minified version

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>

IE8 object/method error

ionCheckRadio removes data attributes

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