본문 바로가기

js/jQuery

[jquery][iCheck] iCheck 사용법 ( radio button 이 여러개일때)



iCheck home
http://icheck.fronteed.com/

jquery plugin iCheck
https://plugins.jquery.com/icheck/




@{
    string useYnCheck =to be priceInfo.useYn.Equals("Y") ? "checked"l : "";
    string notUseYnCheck = priceInfo.useYn.Equals("N") ? "checked" : ""; I A-aa a
}

                <div class="form-group">
                    <label for="Title" - class="control-label col-md-3">Use Y/N</label>
                    <div class="col-md-5 col-sm-5 col-xs-12">
ㅌ:                        <label for="Use" class="control-label">Y</label>

                        <div class="iradio_flat-green">
                            <input type="radio" id="flat-radio-1" name="useYn" style="position: absolute; opacity: 0;" @useYnCheck value="Y"><ins class="iCheck-helper"></ins>
                        </div>

                        <label for="NotUse" class="control-label">N</label>

                        <div class="iradio_flat-green">
                            <input type="radio" id="flat-radio-2" name="useYn" style="position: absolute; opacity: 0;" @notUseYnCheck value="N"><ins class="iCheck-helper"></ins>
                        </div>

                        <label for="NotUse" class="control-label"></label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="Title" class="control-label col-md-3">View Y/N</label>
                    <div class="col-md-5 col-sm-5 col-xs-12">
                        <label for="Use" class="control-label">Y</label>

                        <div class="iradio_flat-green">
                            <input type="radio" id="flat-radio-3" name="viewYn" style="position: absolute; opacity: 0;" @viewYnCheck value="Y"><ins class="iCheck-helper"></ins>
                        </div>

                        <label for="NotUse" class="control-label">N</label>

                        <div class="iradio_flat-green">
                            <input type="radio" id="flat-radio-4" name="viewYn" style="position: absolute; opacity: 0;" @notViewYnCheck value="N"><ins class="iCheck-helper"></ins>
                        </div>
                    </div>
                </div>


OOO.js
$(function () {
    $('input').iCheck({
        radioClass: 'iradio_flat-green'
    });


    $('input').on('ifChecked', function (event) {
        //alert(event.type + ' callback');


        var checkedId = $(this).attr("id");


        console.log(event.type + ' callback | ' + $(this).attr("id"));


        if (checkedId == "flat-radio-1") {
            $("#flat-radio-2").prop("checked", !$(this).is(":checked"));
        } else if (checkedId == "flat-radio-2") {
            $("#flat-radio-1").prop("checked", !$(this).is(":checked"));
        } else if (checkedId == "flat-radio-3") {
            $("#flat-radio-4").prop("checked", !$(this).is(":checked"));
        } else if (checkedId == "flat-radio-4") {
            $("#flat-radio-3").prop("checked", !$(this).is(":checked"));
        }
    });
});