Remove HTML field according to checkbox value

Question

I want to remove HTML field according to Yes/No condition. Currently, all code that I am using I have submitted below to make understand better.

I want when I select Yes it will remove No Field/Input/Box & if I select No it will remove Yes Field/Input/Box.

function AutoCheck() {
if (document.getElementById('yesCheck').checked) {
  document.getElementById('ifYes').style.visibility = 'visible';
} else {
  document.getElementById('ifYes').style.visibility = 'hidden';
}     

if (document.getElementById('noCheck').checked) {
  document.getElementById('ifNo').style.visibility = 'visible';
} else {
  document.getElementById('ifNo').style.visibility = 'hidden';
}

<div>
  <label class="radio">
  <label style="float: left; width: 90px;"><input name="auto" id="yesCheck" value="1" type="radio" onclick="javascript:AutoCheck();"> Auto</label>
  <label style="float: left; width: 90px;"><input name="auto" id="noCheck" value="0" type="radio" onclick="javascript:AutoCheck();"> Manual</label>
</div>
  
<div id="ifNo" style="visibility:hidden">
  <input id="mcstore_limit" name="mcstore_limit" placeholder="MAX Store Limit" type="number" min="1" step="1">
    
  <div id="ifYes" style="visibility:hidden">
    <input id="initial_limit" name="initial_limit" placeholder="MAX Store Limit" type="number" min="1" step="1">
    <input id="acstore_limit" name="acstore_limit" placeholder="Initial Store Limit" type="number" min="1" step="1">
    <input id="auto_limit" name="auto_limit" placeholder="Auto Increment Limit" type="number" min="1" step="1">
  </div>
</div>

zer00ne · Accepted Answer · 2018-02-26 08:51:19Z

JavaScript isn't needed for hide/show if you are using radio buttons and/or checkboxes. The following is required for a pure CSS solution:

HTML - Link Checkboxes/Radio Buttons and Labels

Checkboxes and/or radio buttons with #id
A label for each chx (a.k.a. checkbox(es)) and rad (a.k.a. radio button(s)) with [for="#ID of chx or rad"]
- Each paired chx/rad|label combo are linked in a way that if the label gets clicked then its associated chx/rad is also clicked if both are in the same document.
  
  <label for='ID' >REMOTE BUTTON</label>
  
  <input id='ID' type='checkbox'>

CSS - :checked Pseudo-class and Adjacent Sibling Combinator

Hide chx/rad and the elements you wish to show/hide.

input[type="radio"] { display:none }
For each target (a.k.a. show/hide element), place a chx/rad before it in HTML. This type of positioning is called Adjacent Sibling. In the perspective of the chx/rad, it must be the chx\rad first (like an older brother/sister) then target next (like a younger brother/sister).
- A special CSS selector called the Adjacent Sibling Combinator can isolate a sibling pair (or pairs) using a "+" with or without the use of the usual #id, .class, or [attribute]:
  
  input[type="radio"] + fieldset { display:none}
  
  Older Brother + Younger Brother { CSS style rules for Younger Brother}

Alternative positions can be used without the ASComb (a.k.a. Adjacent Sibling Combinator). Instead of chx/rad being the preceding sibling older sister to the target, it can be an ancestor. An ancestor is a parent element to the target, or simply put: the target's parent, grandmother, great grandpa, etc.
- Although it is a feasible selector, it is harder to isolate in complex and/or cluttered HTML layouts.
  
  input[type="radio"] fieldset { display:none}
  
  Mother/Father Son/Daughter

chx/rad can invoke changes upon elements that are in certain positions in relation to the chx/rad when in and out of checked state. This checked state is more effective when chx/rad and target are isolated (using ASComb). The pseudo-class selector :checked acts like a switch if paired up as Mom and Son (ok) or Big Sister and Little Brother (best):
- :checked applies to chx/rad state exclusively. The following example shows the final CSS rule with all the previously mentioned selector, and positioning.
  
  input[type="radio"]:checked + fieldset { display:block }

References

Exposing Form Fields Radio Button CSS

The Checkbox Hack

Pure CSS Accessible Checkboxes and Radio Buttons

Demo

.button {
  float: left;
  width: 90px;
  border: 3px ridge grey;
  border-radius: 6px;
  text-align: center;
  margin: 5px;
  cursor:pointer;
}

label {
  display: inline-block;
  width: 19ch
}

[type='number'] {
  width: 8ch
}

#y,
#Y,
#N,
#n {
  display: none;
}

#N:checked+fieldset,
#Y:checked+fieldset {
  display: block;
}

<fieldset>
  <legend>Limits</legend>
  <label for='Y' class='button'>Auto</label>

  <label for='N' class='button'>Manual</label>
</fieldset>

<input id="N" name="auto" value="0" type="radio">

<fieldset id="n">
  <legend>Negative</legend>

  <label>MC MAX Store Limit:&nbsp;</label>
  <input id="mc" name="mc" type="number" min="1" step="1">

</fieldset>

<input id='Y' name="auto" value="1" type="radio" checked=true>

<fieldset id="y">
  <legend>Affirmative</legend>

  <label>Initial Store Limit:&nbsp;</label>
  <input id="init" name="init" type="number" min="1" step="1">
  <br>

  <label>AC MAX Store Limit:&nbsp;</label>
  <input id="ac" name="ac" type="number" min="1" step="1">
  <br>

  <label>Auto Increment Limit:&nbsp;</label>
  <input id="auto" name="auto" type="number" min="1" step="1">

</fieldset>

DKyleo · Accepted Answer · 2018-02-25 22:20:24Z

0

Judging by your code, what's currently happening is that when the yesCheck is checked, everything is hidden.

By moving one of the extra up to after the "mcstore_limit" input, it will then function correctly:

<div id="ifNo" style="visibility:hidden">
<input id="mcstore_limit" name="mcstore_limit" placeholder="MAX Store Limit" type="number" min="1" step="1">
</div>

<div id="ifYes" style="visibility:hidden">
<input id="initial_limit" name="initial_limit" placeholder="MAX Store Limit" type="number" min="1" step="1">
<input id="acstore_limit" name="acstore_limit" placeholder="Initial Store Limit" type="number" min="1" step="1">
<input id="auto_limit" name="auto_limit" placeholder="Auto Increment Limit" type="number" min="1" step="1">
</div>

answered Feb 25, 2018 at 22:20

DKyleo

8248 silver badges11 bronze badges

1 Comment

Asterisk Developer Over a year ago

Thanks for your replay, I just checked your replay now, & I was done it earlier, & yes you are right by mistakenly I removed </div> thanks for your reply. Now I wat another info, when I select "Yes" its remove "No" but then if I select again "No" happen nothing I mean not restore the table until reload the page can I make different like if I Unchecked & checked again it will again restore the field...

Prateik Darji · Accepted Answer · 2022-07-07 08:08:18Z

Thanks, for a reply to all, I am using Jscripts to remove a field, because there is 2 field name same to input data into the database please look into the HTML code

<div class="control-group">
    <label class="control-label" style="font-family:Verdana, Geneva, sans-serif; font-size:12x; font-weight:bold" for="prefix">Select Storing Mode</label>
    <div class="controls">
        <label class="radio">
            <label style="float: left; width: 90px;">
                <input name="auto" id="yesCheck" value="1" type="radio" onclick="javascript:AutoCheck();"> Auto
            </label>
            <label style="float: left; width: 90px;">
                <input name="auto" id="noCheck" value="0" type="radio" onclick="javascript:AutoCheck();"> Manual
            </label>
        </label>
    </div>
</div>
    
<div class="control-group">
    <label class="control-label" style="font-family:Verdana, Geneva, sans-serif; font-size:12x; font-weight:bold" for="cstore_limit">Caller or Callee Store*</label>
    <div class="controls">
        <div id="ifNo" style="visibility:hidden">
            <input style="font-family:Verdana, Geneva, sans-serif; font-size:12x; font-weight:bold" id="cstore_limit" name="cstore_limit" placeholder="MAX Store Limit" type="number" min="1" step="1">
            <span class="footnote">Number Only, no space</span>
        </div>
        <div id="ifYes" style="visibility:hidden">
            <input style="font-family:Verdana, Geneva, sans-serif; font-size:12x; font-weight:bold" id="initial_limit" name="initial_limit" placeholder="MAX Store Limit" type="number" min="1" step="1">
            <span class="footnote">Number Only, no space</span><br>
    
            <input style="font-family:Verdana, Geneva, sans-serif; font-size:12x; font-weight:bold;margin-top: 5px;" id="cstore_limit" name="cstore_limit" placeholder="Initial Store Limit" type="number" min="1" step="1">
            <span class="footnote">Number Only, no space</span><br>
    
            <input style="font-family:Verdana, Geneva, sans-serif;font-size:12x;font-weight:bold;margin-top: 5px;" id="auto_limit" name="auto_limit" placeholder="Auto Increment Limit" type="number" min="1" step="1">
            <span class="footnote">Number Only, no space</span><br>
        </div>
    </div>
</div>

see sir there is 2 field with the same name & id also cstore_limit to store in DB, but if I use CSS in DB storing value 0 because there is the same field trying to store. please let me know where I am wrong.

Collectives™ on Stack Overflow

Remove HTML field according to checkbox value

3 Answers 3

HTML - Link Checkboxes/Radio Buttons and Labels

CSS - :checked Pseudo-class and Adjacent Sibling Combinator

References

Demo

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

HTML - Link Checkboxes/Radio Buttons and Labels

CSS - :checked Pseudo-class and Adjacent Sibling Combinator

References

Demo

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related