1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Hide a checkbox when checked (multiple checkboxes)

Discussion in 'jQuery' started by qwikad.com, Nov 13, 2016.

  1. #1
    How can I hide checkboxes independently when a checkbox is checked. Easy to do for one, but what if I have more than one?

    http://jsfiddle.net/DnMK5/49/
    SEMrush
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
    
    <div id="ShowMeDIV">
    <input type="checkbox" id="MyCheckBox" />
    </div>
    
    $('#MyCheckBox').click(function() {
        if ($(this).is(':checked')) {
            $("#ShowMeDIV").hide();
        } else {
            $("#ShowMeDIV").show();
        }
    });
    
    Code (markup):
     
    qwikad.com, Nov 13, 2016 IP
    SEMrush
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #2
    With CSS?
     
    input[type=checkbox]:checked {
    display: none;
    } 
    
    Code (markup):
     
    PoPSiCLe, Nov 13, 2016 IP
  3. sarahk

    sarahk iTamer Staff

    Messages:
    25,166
    Likes Received:
    3,427
    Best Answers:
    100
    Trophy Points:
    665
    #3
    Aren't you trying to get a checkbox to do the job of a radio button?
     
    sarahk, Nov 13, 2016 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,851
    Likes Received:
    1,084
    Best Answers:
    22
    Trophy Points:
    400
    #4
    It's possible. I prefer using checkboxes over radio buttons even if I have to use javascript to switch between them.

    In this case though it probably makes no difference what I use. Pop's idea will work if I put that css in that page (I can't put it in the main .css since it will be affecting all checkboxes).

     
    qwikad.com, Nov 13, 2016 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    25,166
    Likes Received:
    3,427
    Best Answers:
    100
    Trophy Points:
    665
    #5
    It probably can go in the main.css if the form has it's own id.
    I give all forms and tables an id that is really quite specific so that if it's on the page I know exactly what's going on. Combine that with classes etc and you have a lot of control.

    you also use jquery, right? Pretty easy to select all the checkboxes in the form either by type or by class and then loop through and hide the unchecked options.
     
    sarahk, Nov 13, 2016 IP
  6. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #6
    Yeah, that goes in the general CSS, just within an ID or class or something. And, since you can basically style both radio and checkbox however you like, there's really no need in picking one over the other... I have them styled exactly the same (a checkmark being shown when checked/selected) - most of the time, a user doesn't really need to know whether or not they are checkboxes or radio-buttons, as long as the description is accurate (pick as many as you like / pick one).
     
    PoPSiCLe, Nov 14, 2016 IP
  7. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    5,851
    Likes Received:
    1,084
    Best Answers:
    22
    Trophy Points:
    400
    #7
    Thought I'd mention. To make inputs work independently without an ID or class you can do something like input[name=YourInputName] in your javascript or jquery code.
     
    qwikad.com, Nov 15, 2016 IP
  8. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,630
    Likes Received:
    724
    Best Answers:
    152
    Trophy Points:
    470
    #8
    True, but why would you want to? ALL inputs should have an ID, and that ID is normally the same as the name, so there isn't really that much reason to not just use the ID?
     
    PoPSiCLe, Nov 15, 2016 IP