15

jsFiddle here.

I'm a novice at Javascript and having trouble following the documentation at the iCheck page. I've followed the answer to what appears to be a very relevant StackOverflow question here but cannot get an alert to pop up displaying the value I've selected. Can anyone point me in the right direction, please?

HTML

<p>Are you sure you want to have your details removed from our marketing list?</p>
<div id="unsubscribe_radio">
    <ul>
        <li>
            <input type="radio" name="iCheck" value="yes">
            <label>Yes</label>
        </li>
        <li>
            <input type="radio" name="iCheck" value="no">
            <label>No</label>
        </li>
    </ul>
</div>

Javascript

$(document).ready(function () {
  $('input').iCheck({
     radioClass: 'iradio_flat-orange'
  });
  $("input:radio[name=iCheck]").click(function () {
     var value = $(this).val();
     alert("You clicked " + value);
  });
 });
Community
  • 1
  • 1
Clive van Hilten
  • 833
  • 4
  • 16
  • 31
  • 4
    A plugin which prevents the basic events over plain html elements is a lousy plugin. and should not be used – Royi Namir Sep 10 '13 at 14:06
  • I started a project with someone who added this plugin to our code. It is a nightmare to deal with for anything more than a basic website. We're using it in an ASP Core MVC project, and it was constantly rewriting some of our DataBound check/radio controls in ways that prevented page functionality from working as expected. – Andrew S Mar 15 '18 at 19:58

7 Answers7

32

You must use iCheck like this

$(document).ready(function () {
    $('input[name="iCheck"]').on('ifClicked', function (event) {
        alert("You clicked " + this.value);
    });
    $('input').iCheck({
        radioClass: 'iradio_flat-orange'
    });
});

DEMO

Documentation

Anton
  • 30,499
  • 5
  • 42
  • 54
  • Thank you, I see the importance now of 'ifClicked'. The iCheck plugin produces a really neat visual solution, the documentation however assumes a certain level of JS that I'm not at, just yet. – Clive van Hilten Sep 10 '13 at 14:14
  • No problem :) There's a lot of documentation on their website so if you find another error with iCheck you'll most likely find a solution there – Anton Sep 10 '13 at 14:17
  • The demo does not seem to work anymore. Seeing `iCheck is not a function` error in the console. – Tot Zam May 09 '16 at 20:28
  • @Anton Awesome and useful – 3 rules Oct 03 '16 at 09:35
14

Just another hacky way to get checked value with jQuery selectors:

$(".checked input[name=name-of-original-input]").val();

But AFAIK default class for checked values could be changed in configuration.

BTW, I think that iCheck isn't a good choice if it creates such issues with very simple functionality.

simplylizz
  • 1,591
  • 13
  • 25
7

I found the other answers to be useful. However, they are dependent on iCheck's 'ifClicked'. You may not want the value to pop up every time a new radio button is selected, but instead only when a user hits a specific button calling for the alert and corresponding value.

For example: 

$(document).on('click', '.buttonClass', function(event) {
  return alert($('.radioClass:checked').val());
});
Sean L
  • 779
  • 10
  • 22
6

Try this out:- http://jsfiddle.net/adiioo7/yhmu97qh/

JS:-

$(document).ready(function () {
    $('input').iCheck({
        radioClass: 'iradio_flat-orange'
    });

    $('input').on('ifClicked', function (event) {
        var value = $(this).val();
        alert("You clicked " + value);
    });
});
Aditya Singh
  • 9,118
  • 5
  • 30
  • 53
1

this works for me... try it

HTML: <input type="checkbox" id=checkbox" name="checkbox" />

jQuery: $( "#checkbox" ).prop("checked");

Monzur
  • 1,073
  • 10
  • 9
0

For radio buttons and current version of iCheck:

<div class="row">
    <div class="col-lg-1">
        <div class="form-group">
            <label>
                <input type="radio" name="my-radio" class="flat-green my-radio" value="true"> Yes
            </label>
        </div>
    </div>
    <div class="col-lg-1">
        <div class="form-group">
            <label>
                <input type="radio" name="my-radio" class="flat-red my-radio" value="false"> No
            </label>
        </div>
    </div>
</div>

JS:

var isChecked = $("input[name=my-radio]:checked").val();

It will return undefined if no option is selected, true or false if selected.

RenanStr
  • 447
  • 5
  • 15
-1

try this code:

$(".radio .checked input[type=radio]").val()
Nehal
  • 1,544
  • 4
  • 17
  • 30
Allan
  • 1