While checking a checkbox the first checkbox is also checkin

Question

Hi alI, I have a strange issue that I have collection of checkboxes when i check or uncheck a checkbox it automatically checking the very first checkbox also.Any help would be helpful.Thanks in advance.

Ruchi Sharavat · Answer

I tried the same, "Data Edge" item is by default selected. I clicked on "JP Morgan" but 1st item "Acces Bank" didn't get selected automatically. Only "JP Morgan" get selected. See image :

parthasarathy B · Answer

Hi ruchi, Can you run the same code in the link which you send and click on JP Morgan text it checks the first one automatically. This is what i am facing.

Ruchi Sharavat · Answer

I tried your html code. All of the checkboxes have style="display:none", that's why no checkbox was visible to me. I removed this style from all of the checkboxes and tried that, it worked fine. You can try this html at https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_checked Just replace the whole html at left side with below one and click on Run > html > body > div id = "divClients" style = "overflow-y:scroll;max-height:360px;" > div id = "ck-button" data-brand = "Access Bank" onclick = "checkBoxDivClicked(this)" class = "" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Access Bank" > label for = "coding" > Access Bank label > div > div id = "ck-button" data-brand = "Aktiv Kapital" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Aktiv Kapital" > label for = "coding" > Aktiv Kapital label > div > div id = "ck-button" data-brand = "ANZ" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "ANZ" > label for = "coding" > ANZ label > div > div id = "ck-button" data-brand = "AOD" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "AOD" > label for = "coding" > AOD label > div > div id = "ck-button" data-brand = "Banco Popular" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Banco Popular" > label for = "coding" > Banco Popular label > div > div id = "ck-button" data-brand = "BBH" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "BBH" > label for = "coding" > BBH label > div > div id = "ck-button" data-brand = "Citibank" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Citibank" > label for = "coding" > Citibank label > div > div id = "ck-button" data-brand = "Commerz Bank" onclick = "checkBoxDivClicked(this)" class = "" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Commerz Bank" > label for = "coding" > Commerz Bank label > div > div id = "ck-button" data-brand = "Data Edge" onclick = "checkBoxDivClicked(this)" class = "checked" style = "background-color: #efefef;" > input type = "checkbox" id = "coding" name = "interest" value = "Data Edge" checked = "checked" > label for = "coding" > Data Edge label > div > div id = "ck-button" data-brand = "Deloitte" onclick = "checkBoxDivClicked(this)" class = "" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Deloitte" > label for = "coding" > Deloitte label > div > div id = "ck-button" data-brand = "DFG" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "DFG" > label for = "coding" > DFG label > div > div id = "ck-button" data-brand = "Duff & Phelps" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Duff & Phelps" > label for = "coding" > Duff & Phelps label > div > div id = "ck-button" data-brand = "FOLIO Dynamics" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "FOLIO Dynamics" > label for = "coding" > FOLIO Dynamics label > div > div id = "ck-button" data-brand = "INFOCOMP" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "INFOCOMP" > label for = "coding" > INFOCOMP label > div > div id = "ck-button" data-brand = "JP Morgan" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "JP Morgan" > label for = "coding" > JP Morgan label > div > div id = "ck-button" data-brand = "Pamwin" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Pamwin" > label for = "coding" > Pamwin label > div > div id = "ck-button" data-brand = "Pasha Bank" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Pasha Bank" > label for = "coding" > Pasha Bank label > div > div id = "ck-button" data-brand = "Retail Decisions" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Retail Decisions" > label for = "coding" > Retail Decisions label > div > div id = "ck-button" data-brand = "Saylent" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Saylent" > label for = "coding" > Saylent label > div > div id = "ck-button" data-brand = "StateStreet" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "StateStreet" > label for = "coding" > StateStreet label > div > div id = "ck-button" data-brand = "Stemcor" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Stemcor" > label for = "coding" > Stemcor label > div > div id = "ck-button" data-brand = "UNFCU" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "UNFCU" > label for = "coding" > UNFCU label > div > div id = "ck-button" data-brand = "Alliedhealthcare" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Alliedhealthcare" > label for = "coding" > Alliedhealthcare label > div > div id = "ck-button" data-brand = "Ardeo Plc" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Ardeo Plc" > label for = "coding" > Ardeo Plc label > div > div id = "ck-button" data-brand = "AWAC" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "AWAC" > label for = "coding" > AWAC label > div > div id = "ck-button" data-brand = "AYM Tech" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "AYM Tech" > label for = "coding" > AYM Tech label > div > div id = "ck-button" data-brand = "CareData" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "CareData" > label for = "coding" > CareData label > div > div id = "ck-button" data-brand = "Core source ( a trust mark insurance company) " onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Core source ( a trust mark insurance company) " > label for = "coding" > Core source ( a trust mark insurance company) label > div > div id = "ck-button" data-brand = "Digital Infuzion" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Digital Infuzion" > label for = "coding" > Digital Infuzion label > div > div id = "ck-button" data-brand = "Health Fusion" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Health Fusion" > label for = "coding" > Health Fusion label > div > div id = "ck-button" data-brand = "Health intelligence" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Health intelligence" > label for = "coding" > Health intelligence label > div > div id = "ck-button" data-brand = "Healthcode" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Healthcode" > label for = "coding" > Healthcode label > div > div id = "ck-button" data-brand = "HealthScreen solutions" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "HealthScreen solutions" > label for = "coding" > HealthScreen solutions label > div > div id = "ck-button" data-brand = "HFC" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "HFC" > label for = "coding" > HFC label > div > div id = "ck-button" data-brand = "Active Forever" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Active Forever" > label for = "coding" > Active Forever label > div > div id = "ck-button" data-brand = "BCA" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "BCA" > label for = "coding" > BCA label > div > div id = "ck-button" data-brand = "Bunzl Retail" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Bunzl Retail" > label for = "coding" > Bunzl Retail label > div > div id = "ck-button" data-brand = "Crumpler Germany" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Crumpler Germany" > label for = "coding" > Crumpler Germany label > div > div id = "ck-button" data-brand = "Decathlon " onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "Decathlon " > label for = "coding" > Decathlon label > div > div id = "ck-button" data-brand = "GolfSmith" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "GolfSmith" > label for = "coding" > GolfSmith label > div > div id = "ck-button" data-brand = "I Force" onclick = "checkBoxDivClicked(this)" style = "background-color: grey;" > input type = "checkbox" id = "coding" name = "interest" value = "I Force" > label for = "coding" > I Force label > div > div > body > html >

Ruchi Sharavat · Answer

I tried by 3 three checkboxes, each of them is within div of same id "div1" and it's working fine. If you can paste your html from browser what exactly it created? div id = "div1" > input type = "checkbox" name = "vehicle" value = "Bike" > I have a bike br > div > div id = "div1" > input type = "checkbox" name = "vehicle" value = "Car" > I have a car br > div > div id = "div1" > input type = "checkbox" name = "vehicle" value = "Car" > I have a bus br > div > Even if you have dynamic checboxes, you can get and paste html from browser by inspect element.

parthasarathy B · Answer

Hi, Its dynamically created HTML Checkboxes.Each checkboxes contains div as parent with same id, but the problem is not occuring for all the checkbox checks.

Ruchi Sharavat · Answer

Can you please share your code here? Do all of the checkboxed belongs to same group?