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.

Uncheck a checkbox if another is checked (3 checkboxes)

Discussion in 'JavaScript' started by qwikad.com, Apr 23, 2014.

  1. #1
    This allows to automatically check / uncheck between 2 checkboxes:

    Javascript:

    <script>
    function checkRefresh(value)
    {
        document.form1.submit();
    }   
    
    function uncheck(check)
    {
        var prim = document.getElementById("allcities");
        var secn = document.getElementById("allfeatured");
        if (prim.checked == true && secn.checked == true)
        {
            if(check == 1)
            {
                secn.checked = false;
                checkRefresh();
            }
            else if(check == 2)
            {
                prim.checked = false;
                checkRefresh();
            }
        }
    
    }
    </script>
    Code (markup):
    HTML:

    <input type="checkbox" id="allcities" onClick="uncheck(1);">
    <input type="checkbox" id="allfeatured" onClick="uncheck(2);">
    Code (markup):
    I want to add a third option:
    SEMrush
    <input type="checkbox" id="local" onClick="uncheck(3);">
    Code (markup):
    Can anyone suggest a working solution? Thank you.
     
    qwikad.com, Apr 23, 2014 IP
    SEMrush
  2. sarahk

    sarahk iTamer Staff

    Messages:
    26,110
    Likes Received:
    3,814
    Best Answers:
    108
    Trophy Points:
    665
    #2
    will this work?
    function uncheck(check)
    {
        var prim = document.getElementById("allcities");
        var secn = document.getElementById("allfeatured");
       var local = document.getElementById("local");
        if (prim.checked == true && secn.checked == true)
        {
            if(check == 1)
            {
                secn.checked = false;
                local.checked = false;
                checkRefresh();
            }
            else if(check == 2)
            {
                prim.checked = false;
                local.checked = false;
                checkRefresh();
            }
             else if(check == 3)
            {
                prim.checked = false;
                secn.checked = false;
                checkRefresh();
            }
        }
    
    }
    Code (markup):
     
    sarahk, Apr 23, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,298
    Likes Received:
    1,801
    Best Answers:
    244
    Trophy Points:
    515
    #3
    Uhm... this strikes me as "scripting for nothing" -- why not just use input[radio] since they do this by default?

    <input type="radio" name="chooseArea" id="allcities" value="all"/>
    <input type="radio" name="chooseArea" id="allfeatured" value="featured" />
    <input type="radio" name="chooseArea" id="local" value="local" />
    Code (markup):
    No scripttardery needed... well, unless when one is chosen there's other stuff you are doing, and for that you should be attaching 'onchange' from the scripting.

    After all, the unwritten rule of scripting -- if you can't make the page work without JavaScript first, you likely have no business adding scripting to it.
     
    Last edited: Apr 23, 2014
    deathshadow, Apr 23, 2014 IP
    sarahk and ryan_uk like this.
  4. tylerman169

    tylerman169 Member

    Messages:
    92
    Likes Received:
    0
    Best Answers:
    2
    Trophy Points:
    43
    #4
    I would suggest using radio buttons instead of checkboxes as they already have the feature of only allowing one button to be selected in a group. However if you want to still use checkboxes, then you can do something similar to what was asked in this question:

    http://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group

    <input type="checkbox" class="radio" value="1" id="allcities" name="group[1][]">
    <input type="checkbox" class="radio" value="1" id="allfeatured" name="group[1][]">
    <input type="checkbox" class="radio" value="1" id="local" name="group[1][]">
    Code (markup):
    $("input:checkbox").click(function() {
        if ($(this).is(":checked")) {
            var group = "input:checkbox[name='" + $(this).attr("name") + "']";
            $(group).prop("checked", false);
            $(this).prop("checked", true);
        } else {
            $(this).prop("checked", false);
        }
    });
    Code (markup):
     
    tylerman169, Apr 23, 2014 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,298
    Likes Received:
    1,801
    Best Answers:
    244
    Trophy Points:
    515
    #5
    Because if scripting for nothing isn't bad enough, jQuery-tardery will make it all better -- RIGHT...
     
    deathshadow, Apr 23, 2014 IP
    ryan_uk likes this.
  6. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,375
    Likes Received:
    1,347
    Best Answers:
    24
    Trophy Points:
    400
    #6
    Thank you everyone for your input!!

    I think I got it. Actually someone else got it for me. Seems to be working.

    Maybe someone else will find this useful:

    Javascript:

    <script type="text/javascript">
    /*<![CDATA[*/
    function uncheck(){
    var a=uncheck.arguments,z0=0;
    for (;z0<a.length;z0++){
      document.getElementById(a[z0])?document.getElementById(a[z0]).checked=false:null;
    }
    }
    /*]]>*/
    </script>
    Code (markup):
    HTML:

    <input type="checkbox" id="allcities" onClick="uncheck('allfeatured','local');">
    <input type="checkbox" id="allfeatured" onClick="uncheck('allcities','local');">
    <input type="checkbox" id="local" onClick="uncheck('allcities','allfeatured');">
    Code (markup):
     
    qwikad.com, Apr 24, 2014 IP
  7. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #7
    Several people have told you to use radio buttons instead of checkboxes. Why don't you just use the proper HTML elements? And besides, that's one of the ugliest solutions I've seen in a long time.
     
    PoPSiCLe, Apr 24, 2014 IP
  8. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    6,375
    Likes Received:
    1,347
    Best Answers:
    24
    Trophy Points:
    400
    #8
    Not so fast. The problem is I couldn't use radio buttons because they were not sharing the same name property. I thought I mentioned it here. I guess I did not. Why do you think I'd go jumping through all the hoops if I, indeed, could just use radio buttons?

    Ugly or not the script does what it promises. By the way, don't try to be a deathshadow junior. I can take his brunt of criticism, but I, somehow, don't care about yours.
     
    qwikad.com, Apr 24, 2014 IP
  9. sarahk

    sarahk iTamer Staff

    Messages:
    26,110
    Likes Received:
    3,814
    Best Answers:
    108
    Trophy Points:
    665
    #9
    I think the suggestion included changing the "name" of the fields on the form and in the serverside script that processes the data.
     
    sarahk, Apr 24, 2014 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,298
    Likes Received:
    1,801
    Best Answers:
    244
    Trophy Points:
    515
    #10
    Pretty much, if you have ugly client side code that needs fixing, you probably have ugly server-side code handling it.

    Swapping a check if something exists vs. value of a single element shouldn't be too hard -- hell, checking the value of one element vs. the existence of three different ones should be easier.

    Ugly bloated client-side scripting garbage with NO graceful degradation is NOT the answer. The proper semantic markup and making the server-side handle it is.

    Particularly since with you having a new value being added (hence your need for a third one) means you should be in there already making changes.
     
    deathshadow, Apr 25, 2014 IP
  11. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #11
    Uhm. What do you mean, "not sharing the same name-property" - that's exactly what radio-buttons HAVE. Did you mean that they DO share the same name? And that that's the problem? I'm confused.
    And of course you can use radio buttons - I do understand that sometimes you don't have full control, but when you DO, there's no reason adding unnecessary code to do something the element's aren't supposed to do.

    The script and the way it's implemented IS ugly. You have "onclick"-events in your HTML, for one (completely unnecessary, and bad practice), and you're using CDATA in the script...
    As for the comment about not being @deathshadow junior, I think you're a bit funny. First of all, I and @deathshadow are probably some of the people on here who's butted heads the most, at least recently - however, he does know what he's talking about, and sometimes he's even helpful ;) What you chose to do with what I say is completely up to you, but I'm not here to make friends - I'm here to tell people the truth (or, at least, my version of it), and if you don't like it, feel free to block me. But I will keep telling you you're blatantly wrong when you are, regardless.
     
    PoPSiCLe, Apr 25, 2014 IP