Member Avatar for susman81

i want to Show the second block of check boxes if first block of checkboxes completed. i.e; first block has 2 or 3 check box if all were selected then second block will be displayed and same technique will be used for third one.

please help me.

  • 3 Contributors
  • 5 Replies
  • 229 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by codevzv

Dani AI

Generated

As noted, listening for change events is the right idea. Because is generating inputs on the server, rely on stable block wrappers instead of fragile id patterns and attach a single delegated listener. That keeps the client code simple, works for dynamically emitted controls, and makes it easy to restore state after postback.

Minimal plan:

  • Wrap each block in a container element (for example, div.cb-group with data-index="1", data-index="2", etc.).
  • Hide blocks with a CSS class such as .hidden rather than inline styles.
  • Use one delegated change handler to test whether every checkbox in the changed block is checked; if yes, unhide the next block, otherwise hide and optionally clear later blocks.
  • Run the same check once on DOM load so visibility matches any server-side checked values.

Example (vanilla JS — adjust class/attribute names to match your ASP output):

/* place in your stylesheet */
.hidden { display: none; }
document.addEventListener('change', function (ev) {
  const el = ev.target;
  if (!el.matches('input[type="checkbox"]')) return;

  const group = el.closest('.cb-group');
  if (!group) return;

  const groups = Array.from(document.querySelectorAll('.cb-group'));
  const idx = groups.indexOf(group);
  const checks = Array.from(group.querySelectorAll('input[type="checkbox"]'));
  const allChecked = checks.length > 0 && checks.every(cb => cb.checked);

  if (allChecked && groups[idx + 1]) groups[idx + 1].classList.remove('hidden');
  else {
    for (let i = idx + 1; i < groups.length; i++) {
      groups[i].classList.add('hidden');
      groups[i].querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
    }
  }
});

document.addEventListener('DOMContentLoaded', () => {
  // initialize visibility based on any server-side checked boxes
  document.querySelectorAll('.cb-group').forEach((g, i, arr) => {
    const boxes = Array.from(g.querySelectorAll('input[type="checkbox"]'));
    if (!(boxes.length && boxes.every(b => b.checked))) {
      for (let j = i + 1; j < arr.length; j++) arr[j].classList.add('hidden');
    } else if (arr[i + 1]) arr[i + 1].classList.remove('hidden');
  });
});

Troubleshooting/cautions: if some blocks use radio buttons instead of checkboxes, change the detection logic to require "at least one checked" for that block. For ASP postbacks, either render the correct .hidden class server-side or re-run the initialization after the postback (or partial update). Finally, keep server-side validation in place — client-side show/hide is UI-only and should not be the only guard for important business logic.

Recommended Answers

All 5 Replies

Member Avatar for hericles

Add a jquery function to each checkbox in the first group, either as a click or change function, and from that click/change call a method that examines each checkbox and if they are all checked, displays the second set.
Something like:

$(document).ready(function() {
    $('#checkbox1').change(function() {
        checkCheckboxes();
    });
    // or the click method
    $('#checkbox1').click(function() {
        if ($(this).is(':checked')) {
            checkCheckboxes();;
        }
    });
});

function checkCheckboxes() {
    if (all checkboxes are checked) {
        $('.secondSet').css('display', 'block');
    }
}
Member Avatar for susman81 
I am using the asp page unable to understand.  all checkboxes are dynamic created.

Please help
Member Avatar for susman81 
function showSelect(n) {


 if (document.getElementById("s"+(n)+"_"+"c"+(n)).checked)
 {

    document.getElementById("s"+(n+1)+"_"+"c"+(n+1)).style.display ="block";
 }
 else
 {
  for (x=n+1;x<=4;x++) {

    document.getElementById("s"+x +"_"+"c"+x).style.display ="none";

    document.getElementById("s"+x +"_"+"c"+x).checked=false;
   }
  }
}



             <input type="checkbox" id="s<%=sem%>_c<%=coff%>" name="c<%=cnt%>" value="<%=sid%>"  onclick = "showSelect(s<%=sem%>_c<%=coff%>)" <% if sem>2 then response.Write("style='display:none'") %>>
            <%else%>

            <input type="radio" id="s<%=sem%>_c<%=coff%>" value="<%=sid%>" name="c<%=cnt%>" onclick = "showSelect(s<%=sem%>_c<%=coff%>)" <% if sem>2 then response.Write("style='display:none'") %>>
Member Avatar for hericles

Hmmm, a down and no comment. Wish whoever did those could at least explain themselves.

Anyway, I'm not sure what trouble you are having now. I'll see if I can find the time to put a sample of what I mean together. Probably be easier.

Member Avatar for codevzv

I appreicate hericles .first u ask about checkbox,then u say i am using asp.ask with understanding of terms and with reference

Edited by codevzv
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.