What is the best approach to display white space when the checkbox is not selected, and to split the content by a comma followed by a space when it is

<ul class="dropdown-menu">
    <li><a href="#" class="small" data-value="1" tabindex="-1">
        <input type="checkbox" id="Speaker1" class="chkCris" value="1" />1</li>
            <li><a href="#" class="small" data-value="2" tabindex="-1">
                <input type="checkbox" id="Speaker2" class="chkCris" value="2" />2</a> </li>
            <li><a href="#" class="small" data-value="6" tabindex="-1">
                <input type="checkbox" id="chkOthers" class="chkCriOthers" value="Others" />&nbsp;Others, please explain</a> </li>
            <li><div id="divOthers" style="display: none; font-size: 14px; text-align: left;"><a id="A1" href="#" class="small" data-value="7" tabindex="-1">
        <input class="input-xxlarge" id="textboxOthers" name="textboxOthers" type="text"                              placeholder="Others, please explain" ></a> 
        </div>
    </li>
</ul>

function getValueCriteriaSpeaker()
{
    /* define an array to store values */
    var chkArray = [];
    $(".chkCris:checked").each(function () {
        chkArray.push($(this).val());
    });

    if (document.getElementById("chkOthers").checked == true)
    {
        var otherscriteria = document.getElementById("textboxOthers").value;
        chkArray.push(otherscriteria);
    }

    // ....

How can I display white space when a checkbox is unchecked? For example, if value 2 is unchecked, how do I print: 1, , Others

javascriptc#asp.netdatabase

Answer №1

While the question may not be perfectly clear, I have put together an implementation to address your issue

function getSelectedValues(){
     var values = $("ul.dropdown-menu :checkbox:checked").map(function(i,cb){ return $(cb).val();});
     var str = values.get().join($('#useComma').is(':checked') ? ',' : ' ');
    
      $('#textboxOthers').val(str);
  }

$('.chkBox').on('change',getSelectedValues)
$('#useComma').on('change',getSelectedValues)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <input type="checkbox" id="useComma"/> 
  Split By "," (Comma)
</span>
<ul class="dropdown-menu">
            <li><input type="checkbox" id="Speaker1" class="chkBox" value="1" />1</li>
            <li><input type="checkbox" id="Speaker2" class="chkBox" value="2" />2</li>
            <li><input type="checkbox" id="chkOthers" class="chkBox" value="Others">Others</li>
            <li>
              <div id="divOthers">
                  <input class="input-xxlarge" id="textboxOthers" name="textboxOthers" type="text"                              placeholder="Others, please explain"/>
               </div>
            </li>
</ul>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting default headers in different Axios instances or within sub-modules

Is there a way to establish global default headers in Axios for dependencies that also utilize Axios? I am currently working on a "react component" (public on npm) which relies on Axios. However, when this component initiates an Ajax call, it is important ...

javascriptreactjsnpmaxios

Enclose the string stored in the variable with double quotation marks

I am retrieving a variable called audioUrl from the database which is stored as a string url. The issue I am facing is that the url does not have double quotes around it, so I need to add them manually. Below is my code snippet: var audioUrl; // The ur ...

javascriptjquery

Sending an HTTP request to an ASP.net Web API with user authentication from an Ionic Angular application

I've encountered a challenge while attempting to send an http get request to an ASP.net Web API that requires user authentication. My aim is to retrieve a JSON file from the API. I am currently working on developing an Ionic Angular application and my ...

asp.netangularapiauthenticationionic-framework

Utilizing a JavaScript/jQuery/alternative library extension for transforming HTML into XML format

Are there any JavaScript libraries that can convert HTML to XML? Can these libraries handle both clean HTML and real-world malformed (or 'dirty') HTML? Is there a JavaScript library available for this task, or would I need to use a server-side ...

javascriptjqueryhtmlxml

What is the best method to assign the value of a useState variable to a specific field in an array of objects for inserting data in

**I have a billing form that includes product details for the admin to fill out. One field, labeled "BillID", should automatically populate with a default value of 'Bill ID + 1' through a variable. **Below is the code: const [BillIdFetch, setB ...

javascriptmysqlnode.jsreactjsexpress

Including a hyperlink in VUE Bootstrap for seamless user navigation

Why does this always drive me crazy? I'm determined to include an external link () and an image(enter image description here) on my portfolio page within the title of the project. main.js { id: 18, url: 'single-portfolio. ...

javascripthtmltwitter-bootstrapvue.jsfrontend

Click the "Login" button using Jquery to gain access

Whenever I hit the Login button, a 500 Internal server error pops up in the console. Can someone guide me on the correct way to perform a POST request using jQuery? I would really appreciate any help. <button class="login100-form-btn" type=& ...

javascriptjqueryajax

Accessing the DataKey of a GridView row when a button is clicked

Is there a way to retrieve the DataKeyName value of a GridView Row when the OnClick event of a button inside that row is triggered? I need to access the DataKeyName value of the specific row where the button is located within my codebehind. Can this be ac ...

asp.netgridviewgridviewrow

Continuous duplication of dropdown list values

One of the features in my code involves using dropdown list values that are bound from a database. Public Function get_type() As String 'get type If IsPostBack = False Then da = New OleDbDataAdapter("select (type) from pro ...

asp.netvb.net

Maintain Open State of Toggle Drop Down Menu

Having an issue with the toggle down menu or list on my webpage. The problem is that the menu is constantly open (the #text_box) when the page loads. My intention was for it to be closed initially, and then open only when the user clicks on the 'Ope ...

javascriptjqueryhtml

Disappearing input field in DateTimePicker Bootstrap when blurred

Currently, I am utilizing the Bootstrap DateTimePicker plugin to enable users to select a specific date and time. The plugin functions well with one minor issue - whenever the user clicks outside or loses focus on the calendar box, both the box itself and ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for redirecting in Vuejs when the input focus is not true

I have a Vue view where the search input automatically focuses when opened. However, if the user clicks away from the input, I want the view to redirect back. I've searched for solutions to this problem but have not had any luck. Here is my code usin ...

javascriptvue.jsinputautofocus

The function fails to transmit any information

I'm having some trouble with my code. The ajax function isn't sending data and I can't figure out why. It might be related to the javascript function. Can someone please help me troubleshoot? Interestingly, when I move the submit button out ...

javascriptajaxformssubmit

What are the reasons for the position: fixed; property not functioning in CSS?

Currently, I am working on a demo showcasing my skills in HTML and CSS. Although my page lacks extensive content, it features both a sidebar and drawer. However, I have encountered an issue with the sidebar. To address this problem, I implemented specific ...

javascripthtmlcss

Tips for sending a prompt within a .js document

Within my script.js file, I have a prompt that collects user input (specifically a username), stores it in an array, and then should send that array to the server. I'm struggling with getting the "prompt.submit" section to function properly. Whenever ...

javascriptnode.jsexpresssocket.ioprompt

How to Use Google Calendar API to Retrieve Available Time Slots for a Given Day

Is there a way to extract the list of available time slots from my Google Calendar? Currently, I am only able to retrieve the list of scheduled events. I am utilizing the Google Calendar npm package. google_calendar.events.list(calObj.name,{ timeMin ...

javascriptnpmgoogle-calendar-api

Retrieving JSON element by key in nodejs may result in an undefined value

Is there a way to retrieve the value of an Array using the key name in nodejs? I keep getting undefined when attempting to access it using this method. I need the value to be displayed when calling the key. var sns_DimensionsValue = sns.Trigger.Dimensi ...

javascriptnode.js

Discovering character width in C# using a custom font

To include a font within a PDF file, it is necessary to determine the widths of its glyphs for metadata inclusion. This information is also crucial for calculating the area occupied by text as it flows throughout the page. I am exploring the possibility o ...

c#asp.netpdffonts

How to print a file with the .aspx extension in an Asp.net

While attempting to print the contents of an HTML DIV using the provided code, everything worked smoothly. However, upon integrating an Ajax Control into an Aspx page, an error message surfaced: "Extender control 'CalendarExtender2' is not a r ...

c#javascriptasp.netajax

Invoking a nested method within Vue.js

I am facing an issue in my vuejs application with 2 methods. When I define method1 a certain way, it does not run as expected. method1: function(param1, param2){ // I can log param1 here thirdLib.debounce(function(param1, params2){ // It d ...

javascriptvue.jsvuejs2