web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

No record found.

News and Announcements icon
Community site session details

Community site session details

Session Id :
Dynamics 365 Community / Forums / Microsoft Dynamics CRM (Archived) / Checkbox field on a form
Microsoft Dynamics CRM (Archived)

Checkbox field on a form

(0) ShareShare
ReportReport
Posted on by Abdul Wahab 12,119 Moderator

Hi all,

I have write below code in HTML web resource to make checkbox field:

<html>
<head>
    <title></title>
    <script src="../Scripts/jquery1.11.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        // function will be called when web resource is loaded on Form.
        $(document).ready(function () {
            ConvertDropDownToCheckBoxList();
        });

        //Coverts option list to checkbox list.
        function ConvertDropDownToCheckBoxList() {
            debugger;
            var dropdownOptions = parent.Xrm.Page.getAttribute("aw_bant").getOptions();
            var selectedValue = parent.Xrm.Page.getAttribute("aw_bantoptionvalues").getValue();
           
            $(dropdownOptions).each(function (i, e) {
                var rText = $(this)[0].text;
                var rvalue = $(this)[0].value;
                var isChecked = false;
                console.log(rText);
                if (rText != '') {
                    if (selectedValue != null && selectedValue.indexOf(rvalue) != -1)
                        isChecked = true;

  /* Remove spaces before input, label word and end tags of input & label*/
                    var checkbox = "< input type='checkbox' name='r'/ >< label> " + rText + "</ label>"
                    debugger;
                    $(checkbox)
                        .attr("value", rvalue)
                        .attr("checked", isChecked)
                          .attr("id", "id" + rvalue)
                        .click(function () {
                            //To Set Picklist Select Values
                            var selectedOption = parent.Xrm.Page.getAttribute("aw_bantoptionvalues").getValue();

                            if (this.checked) {
                                if (selectedOption == null)
                                    selectedOption = rvalue+"";
                                else
                                    selectedOption = selectedOption + "," + rvalue
                            }
                            else {
                                var tempSelected = rvalue + ",";
                                if (selectedOption != null) {
                                    if (selectedOption.indexOf(tempSelected) != -1)
                                        selectedOption = selectedOption.replace(tempSelected, "");
                                    else
                                        selectedOption = selectedOption.replace(rvalue, "");
                                }
                            }
                            parent.Xrm.Page.getAttribute("aw_bantoptionvalues").setValue(selectedOption);


                            //To Set Picklist Select Text
                            var selectedYear = parent.Xrm.Page.getAttribute("aw_bantoptions").getValue();
                            if (this.checked) {
                                if (selectedYear == null)
                                    selectedYear = rText+"";
                                else
                                    selectedYear = selectedYear + "," + rText
                            }
                            else {
                                var tempSelectedtext = rText + ",";
                                if (selectedYear != null) {
                                    if (selectedYear.indexOf(tempSelectedtext) != -1)
                                        selectedYear = selectedYear.replace(tempSelectedtext, "");
                                    else
                                        selectedYear = selectedYear.replace(rText, "");
                                }
                            }
                            parent.Xrm.Page.getAttribute("aw_bantoptions").setValue(selectedYear);

                        })
                        .appendTo(checkboxList);
                }
            });
        }
    </script>
    <meta charset="utf-8">
    <meta>
    <meta>
    <meta>
    <meta>
</head>
<body style="word-wrap: break-word;">
    <div id="checkboxList">
    </div>

</body>
</html>

but my code showing me below output instead of checkbox:

78052.Untitled1.png

 

Please tell Where I am wrong?

 

Thank you

 

Regards,

*This post is locked for comments

I have the same question (0)
  • Verified answer
    Community Member Profile Picture
    Community Member on at

    Use this line. label tag is missing.

    var checkbox = "<label><input type='checkbox' name='r' />" + rText + "</ label>

  • Suggested answer
    Gopalan Bhuvanesh Profile Picture
    Gopalan Bhuvanesh 11,401 on at

    Hi

    Just add a ; at the end and try:

    var checkbox = "< input type='checkbox' name='r'/ >< label> " + rText + "</ label>";

  • Verified answer
    Nithya Gopinath Profile Picture
    Nithya Gopinath 17,078 on at

    Hi Abdul Wahab,

    Please replace the code as shown below.

    var checkbox = "<label><input type='checkbox' name='r' value='r'>" + rText + "</label>";

    Hope this helps.

  • Abdul Wahab Profile Picture
    Abdul Wahab 12,119 Moderator on at

    Mohd, Gopalan and Nithya

    I am able to see checkboxes. I have one more problem here, when I check the checkboes it is not filling my values in Bant Option Values and Bant Options as shown below:

    7723.Untitled2.png

    Please help me more so that I am able to complete my task.

    Thank you

    Regards,

    Abdul

  • Gopalan Bhuvanesh Profile Picture
    Gopalan Bhuvanesh 11,401 on at

    Hi

    There is one more field called BANT in the image.

    What are the names of these fields (BANT Options, BANT Option Values, BANT)?

    What values you are expecting in these two fields, when these checkboxes are checked?

  • Abdul Wahab Profile Picture
    Abdul Wahab 12,119 Moderator on at

    Hi Gopalan,

    BANT is my option set which contains: Budget, Authority, Needs and Timeline.

    What I want, I showed you in the below image:

    Untitled23.png

    Thank you

    Regards,

    Abdul

  • Verified answer
    Gopalan Bhuvanesh Profile Picture
    Gopalan Bhuvanesh 11,401 on at

    Hi

    You have to add more to update the form fields according to the checkbox selection.

    var checkbox = "< input type='checkbox' name='r' onclick='UpdateBANT();' / >< label> " + rText + "</ label>";

    Create another function (Example: UpdateBANT)

    var BANTOptions = "";

    Check if each of the check box is checked or not

    If checked then add that value to this variable (add comma when you add more than one value to this).

    BANTOptions = BANTOptions + <checked Checkbox value>;

    Update the field value after checking all the checkboxes (Add value if checked or ignore if not checked)

    (Search for the sample code to do the above)

    www.experts-exchange.com/.../How-do-I-capture-a-checkbox-change-event-using-JQuery.html

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Responsible AI policies

As AI tools become more common, we’re introducing a Responsible AI Use…

Neeraj Kumar – Community Spotlight

We are honored to recognize Neeraj Kumar as our Community Spotlight honoree for…

Congratulations to the November Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > 🔒一 Microsoft Dynamics CRM (Archived)

#1
SA-08121319-0 Profile Picture

SA-08121319-0 4

#1
Calum MacFarlane Profile Picture

Calum MacFarlane 4

#3
Alex Fun Wei Jie Profile Picture

Alex Fun Wei Jie 2

Last 30 days Overall leaderboard

Featured topics

Product updates

Dynamics 365 release plans