Bootstrap 4 checkbox change jquery javascript

        isCreditCardPaymentSelector: "input[name = 'IsCreditCardPayment']",
        isCreditCardPaymentIdSelector: "input[name='IsCreditCardPayment'][type='hidden']",

form.find(options.isCreditCardPaymentSelector).removeAttr('checked');        form.find(options.isCreditCardPaymentSelector).parent('label').removeClass('active');
form.find(options.isCreditCardPaymentIdSelector).val(false);

Dnn & JQuery tips - repost

Good practical info how to deal with JQuery plugins not provided with DNN.

http://www.dnnsoftware.com/wiki/page/reusable-dotnetnuke-jquery-plugins

Simple reusable javascript object - basics

You need to create javascript to handle multiple instances of same type of functionality with ability to input standardized arguments.
We need to model Javascript object. Javascript does not support objects in OOP sense and this creates a lot of confusion. On top of it its dynamic language. Comparing it to .NET classes where mostly you deal with static members of class is not possible.
So here is example of simple Javascript object to implement creating and configuring simplest div container.
I'm using JQuery.

Declaring:

counterPanel = function (pnlId, argsParam) {
    var args = $.extend({
        title: "title",
        color: "rgb(255,250,250)",
        execute: null
        },argsParam
        );
    this.Show = function Show() {
         
        if (!DoesContainerExists(pnlId)) {      
            $('#countersContainer').append('<div id="'+pnlId+'"><h1 style="color:'+args.color+'">'+args.title+'</h1></div>');
        }
       
    }
    this.Hide = function Hide() {
        if (DoesContainerExists(pnlId)) {
            $('div#' + pnlId).Hide();
        }
    }
    if (typeof(args.execute) == 'function') args.execute();

    function DoesContainerExists(pnlId) {
        return ($('#countersContainer div#' + pnlId + ':First').attr('id') != undefined);
    }
}

Instancing with various input params including function injection.

var dlgFirst = new counterPanel("dlgFirst", {title:"something special", color:"rgb(0,0,100)"});
        dlgFirst.Show();
        var dlgSecond = new counterPanel("dlgSecond", { title: "special", color: "rgb(110,0,100)", execute: function () { alert('2');} });
        dlgSecond.Show();

Detecting checked radio button on UI dialog

Here is container for jquery UI dialog filled with radio buttons:


<div id="gfdialog" title="Meldung vom Website">
            <div>xxxxxxxxxxxxxxxxxx?</div>
            <input type="radio" name="radLstCopyType" value="1" checked="checked" /><span>Option 1</span>
            <div style="margin-left: 21px!important; margin-bottom: 15px;">Option 2.</div>
            <input type="radio" name="radLstCopyType" value="3" />
            <span>Szenario-CFG</span>
            <div style="margin-left: 21px!important; margin-bottom: 15px;">Option 3</div>
            <input type="radio" name="radLstCopyType" value="2" />
            <span>Muster-CFG</span>
            <div style="margin-left: 21px!important; margin-bottom: 15px;">xxxxxxxxxxxxxxxxxx.</div>
        </div>

; and here is code that gets checked radio button:


function RegisterGFCopyBGDialog() {          
            $("#gfdialog").dialog({
               
                autoOpen: false,
                width: 400,
                buttons: [
                    {
                        text: "Ok",
                        click: function () {
                            var selectedCFG_artId = $('input[name="radLstCopyType"]:checked').val();                          
                           
                            if (selectedCFG_artId == null) return;
                            __doPostBack('radLstCopyType', selectedCFG_artId);
                            $(this).dialog("close");
                        }
                    },
                    {
                        text: "Abbrechen",
                        click: function () {
                            $(this).dialog("close");
                        }
                    }
                ]
            });
        }


Most important part is  :

$('input[name="radLstCopyType"]:checked').val();                           

and NOT:

$('input[name="radLstCopyType"][checked="checked"']).val();                          

or

$('input[name="radLstCopyType"][checked="true"']).val();                          

or

$('input[name="radLstCopyType"][checked]).val();                          

JQuery / JavaScript code test with markup

When developing Javascript / JQuery code in early phase it tends to be tricky to easily and quickly do some testing.
For experienced in Javascript it is enough FireBug-like plugins in modern browser but in complex projects it can be cumbersome.
Hence some online solutions exist.

http://jsfiddle.net/

http://jsbin.com/

They are quite self-explanatory in purpose.
I can't see how to use them in context of existing complex ASP.NET web forms pages in my website.

Just a quick refresher for a few tricks when using browser developer kits for JQuery testing.

1. Firebug
    Open website. Open Firebug window (F12). Select Script tab.
   You need to define some breakpoint in your markup inside some JQuery code. 
   I'm not sure sometimes you need to reload your website (Ctrl+F5) in order to make breakpoint active.
  Do action on your website to make Firebug "fire" your new breakpoint.
 At this moment you are ready to test your JQuery expression in Console tab of Firebug.

2. Visual Studio + Internet Explorer
  From VS 2010 its possible to debug Javascript code.
  There is only one catch. Make sure when you first start IE browser session to delete all your History and cookie.
  This way you make sure that browser loads latest version of your JS file.
  If not you will see in VS your JS file with [dynamic] suffix. This is NOT OK!
  It means that VS found cached version of your JS file and is using it to debug.