Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jun 2016
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Change div container border color if checkboxes selected

    Hello. I have a form with different series of checkboxes contained in different divs. I found a script that changes the color of the container border when one or more checkboxes have been selected. I would like to modify the script (or have a similar one) so that it can work independently for different checkboxes in the same form, is it possible? Thank you very much for helping.
    This is the code:

    Code:
    <style>
    .boxContent {  
      border:2px solid #ccc;	
    }
    .isChecked {
      border:2px solid blue;
    }
    </style>
    
    <div class="boxContent">
    <input type="checkbox" onclick="UpdateFeatures(this,false);"  >
    <br>
    <input type="checkbox" onclick="UpdateFeatures(this,false);">
    </div>
    
    <script>
    function UpdateFeatures(checkbox) {
      console.log(document.querySelector(".boxContent"));
    document.querySelector(".boxContent").classList.remove("isChecked");
      if (checkbox.checked) {  document.querySelector(".boxContent").classList.add("isChecked");
      }
    }
    </script>

  2. #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,935
    Thanks
    65
    Thanked 601 Times in 595 Posts
    Clarification please.
    What do you mean by "work independently"? Each checkbox already is independent of the other.

    Is the border supposed to have different colors when different checkboxes are checked?
    Are there supposed to have multiple borders around different sets of checkboxes?
    Are the checkboxes supposed to work like radio buttons where only one can be selected at a time?

    So many questions, so little time (sigh).

  3. #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,868
    Thanks
    58
    Thanked 691 Times in 686 Posts
    Building on your previous example, and assuming that the div whose border you want to change is the direct parent element of the checkbox being checked...
    PHP Code:
    <!DOCTYPE html>
    <
    html>

    <
    head>
        <
    title></title>
        <
    style>
    .
    boxContent {  
      
    border:2px solid #ccc;    
    }
    .
    isChecked {
      
    border:2px solid blue;
    }
    </
    style>
    </
    head>

    <
    body>
    <
    div class="boxContent">
        <
    input type="checkbox" class="selectfield" name="selectfield" value="IB2001">IB2001<br>
    </
    div>    
    <
    div class="boxContent">
        <
    input type="checkbox" class="selectfield" name="selectfield" value="IB2002">IB2002<br>
    </
    div>
        <
    select class="selectfield" id="mysel">
            <
    option value="">- Select -</option>
            <
    option value="STS">STS</option>
            <
    option value="PBN">PBN</option>
            <
    option value="EUR">EUR</option>
            <
    option value="">- No Selection -</option>
        </
    select>

        <
    textarea style="width:100%" name="info" id="info" cols="20" rows="5"></textarea>

        <
    script>
            (function() {
                var 
    selval "",
                    
    cbs document.querySelectorAll("input[name=selectfield]"),
                    
    len cbs.length,
                    
    0;

                
    cbs.forEach(function(cb) {
                    
    cb.onchange = function() {
                        var 
    theval document.getElementById("info").valuepar=this.parentElement;
                        
    document.getElementById("info").value this.checked theval this.value '\n' theval.replace(this.value '\n'"")
                        
    par.className=this.checked?par.className+" isChecked":par.className.replace(" isChecked","");
                    }
                })

                
    document.getElementById("mysel").onchange = function() {
                    var 
    theval document.getElementById("info").value,
                        
    myval this.value,
                        
    sfx myval == "" "" '\n';
                    
    document.getElementById("info").value selval == "" theval myval sfx theval.replace(selval '\n'myval sfx);
                    
    selval myval;
                }
            })();
        
    </script>
    </body>

    </html> 

  4. Users who have thanked xelawho for this post:

    Cosina (Nov 8th, 2018)

  5. #4
    New Coder
    Join Date
    Jun 2016
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Exactly xelawho, I opened a new topic, because it seemed right to me, given the different subject. Thank you so much, you have become my guardian angel.

  6. #5
    New Coder
    Join Date
    Jun 2016
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you, jmrker, too. I don't answer to you, because xelawho has already solved, since he is following my work. You are all very kind. Ciao (Italian style)

  7. #6
    New Coder
    Join Date
    Jun 2016
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry xelawho, I had not seen well before. There is still a small problem (or big?). I need, as you see in the code I sent you, to put the border around checkbox groups and not the individual checkboxes. Is it possible? Sorry if I have not explained well, but I'm Italian and I write in English as I can. I have to put the border to many groups of checkboxes on the page and each group must be independent.
    Attached Thumbnails Attached Thumbnails -schermata-2018-11-08-alle-14-46-18-png  
    Last edited by Cosina; Nov 8th, 2018 at 03:03 PM.

  8. #7
    New Coder
    Join Date
    Jun 2016
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Maybe I solved alone doing this. Tell me if it's correct (it seems to me that it works):

    Code:
    <div class="boxContent">
        <input type="checkbox" class="selectfield" name="selectfield" value="IB2001">IB2001<br>
        <input type="checkbox" class="selectfield" name="selectfield" value="IB2002">IB2002<br>
    </div>
    <br>
    <div class="boxContent">
        <input type="checkbox" class="selectfield" name="selectfield" value="IB2003">IB2003<br>
        <input type="checkbox" class="selectfield" name="selectfield" value="IB2004">IB2004<br>
    </div>

  9. #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,868
    Thanks
    58
    Thanked 691 Times in 686 Posts
    seems like it does the job

  10. #9
    New Coder
    Join Date
    Jun 2016
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hello xelawho, I'm still here. Sorry if I still bother you. I managed to put some checkboxes for quantity choise in a dropdown. It works well, but I wanted to ask you if it's possible to give the border color even around the "Qty" box when the checkboxes inside it are checked. There are many of these dropdown in the page, not only one. This is an example with your script, but now the border color is around the checkbox checked:

    Code:
    <style>
    /* MULTISELECT CHECKBOX */
    .multi-checkbox-container {
      display:inline-block; 
      vertical-align: top;
    }
    .multi-checkbox {
      border: 0;
      border-collapse: separate;
      border-spacing: 10px;
    }
    .multi-checkbox td {
      padding-right: 3px;
    }
    .multi-checkbox input[type=checkbox] {
      position: relative;
      opacity: 1;
    }
    
    /* QTY */
    .chkdropdown {
        display:inline-block;
        position:relative;
        font-family:'arial', sans-serif;
        color:black;
    }
    .chkdropdown, .chkdropdown ul {
        border:1px solid #c6c4c4;
        padding: 4px;
    }
    .chkdropdown ul {
        position:absolute;
        width:100%;
        list-style-type:none;
        padding:0;
        margin:0;
        left:0;
        height:0;
        overflow:hidden;
        border-color:transparent;
        background-clip:padding-box;
        z-index: 1;
    }
    .chkdropdown:hover ul {
        height:auto;
        border-color:#c6c4c4;
    }
    .chkdropdown li {
        background-color: #fff;
    }
    .chkdropdown li:nth-child(n+2) {
        border-top:1px solid silver;
    }
    .boxContent {  
      border:2px solid #ccc;    
    }
    .isChecked {
      border:2px solid blue;
    }
    </style>
    
    
    <div class="boxContent">
        <input type="checkbox" class="selectfield" name="selectfield" value="IB2001">IB2001<br>
        <input type="checkbox" class="selectfield" name="selectfield" value="IB2002">IB2002<br>
    </div>
    <br>
    <div class="boxContent">
        <input type="checkbox" class="selectfield" name="selectfield" value="IB2003">IB2003<br>
        <input type="checkbox" class="selectfield" name="selectfield" value="IB2004">IB2004<br>
    </div>
    
    <table class="multi-checkbox">
       <tr>
          <td style="border:1px solid #ccc;">
             IB20000
          </td>
          <td class="chkdropdown boxContent">
             Qty &udarr; 
             <ul style="z-index: 2">
                <li>
                   <input type="checkbox" class="selectfield" name="selectfield" id="cdd1" value="IB20000 - Qty:01;">
                   <label for="cdd1">01</label>
                </li>
                <li>
                   <input type="checkbox" class="selectfield" name="selectfield" id="cdd2" value="IB20000 - Qty:02;">
                   <label for="cdd2">02</label>
                </li>
                <li>
                   <input type="checkbox" class="selectfield" name="selectfield" id="cdd3" value="IB2000 - Qty:03;">
                   <label for="cdd3">03</label>
                </li>
             </ul>
          </td>
       </tr>
    </table>
    
    
    
    <textarea style="width:100%" name="info" id="info" cols="20" rows="5"></textarea>
    
    <script>
            (function() {
                var selval = "",
                    cbs = document.querySelectorAll("input[name=selectfield]"),
                    len = cbs.length,
                    i = 0;
    
                cbs.forEach(function(cb) {
                    cb.onchange = function() {
                        var theval = document.getElementById("info").value, par=this.parentElement;
                        document.getElementById("info").value = this.checked ? theval + this.value + '\n' : theval.replace(this.value + '\n', "")
                        par.className=this.checked?par.className+" isChecked":par.className.replace(" isChecked","");
                    }
                })
    
                document.getElementById("mysel").onchange = function() {
                    var theval = document.getElementById("info").value,
                        myval = this.value,
                        sfx = myval == "" ? "" : '\n';
                    document.getElementById("info").value = selval == "" ? theval + myval + sfx : theval.replace(selval + '\n', myval + sfx);
                    selval = myval;
                }
            })();
        </script>
    Last edited by Cosina; Nov 10th, 2018 at 04:49 PM.

  11. #10
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,186
    Thanks
    4
    Thanked 462 Times in 450 Posts
    1) Where are your LABEL tags?

    2) Where are your ID targets for LABELs?

    3) Why do you think you need JavaScript for this?!? Just that determined to have it work in IE7?

    See, if we were to use a dummy element, like an empty italic tag (a popular element for this), we could absolute position it to fake the border, so long as we relative position the other elements inside the outer DIV so they depth sort over it.

    Czech this out:

    Code:
    <div class="checkboxGroup">
    	<input
    		type="checkbox"
    		name="describeMe"
    		id="describeMe_IB2001"
    		value="IB2001"
    	>
    	<i></i>
    	<label for="describeMe_IB2001">IB2001</label>
    	<br>
    	<input
    		type="checkbox"
    		name="describeMe"
    		id="describeMe_IB2002"
    		value="IB2002"
    	>
    	<i></i>
    	<label for="describeMe_IB2002">IB2002</label>
    </div>
    <div class="checkboxGroup">
    	<input
    		type="checkbox"
    		name="describeMe"
    		id="describeMe_IB2003"
    		value="IB2003"
    	>
    	<i></i>
    	<label for="describeMe_IB2003">IB2003</label>
    	<br>
    	<input
    		type="checkbox"
    		name="describeMe"
    		id="describeMe_IB2004"
    		value="IB2004"
    	>
    	<i></i>
    	<label for="describeMe_IB2004">IB2004</label>
    </div>
    then for CSS:

    Code:
    .checkBoxGroup {
    	position:relative; /* so we can absolute position the child <i> relative to this */
    	padding:2px; /* width of the border */
    	margin-bottom:1.5em; /* don't use <br> in the markup to do padding's job! */
    }
    
    .checkBoxGroup input,
    .checkBoxGroup label {
    	/* depth sort over the generated content */
    	position:relative;
    	z-index:2;
    }
    
    .checkBoxGroup i {  
    	position:absolute;
    	box-sizing:border-box;
    	top:0;
    	left:0;
    	width:100%;
    	height:100%;
    	border:2px solid transparent;
    }
    
    .checkBoxGroup #describeMe_IB2001:checked + i {
    	border-color:blue;
    }
    
    .checkBoxGroup #describeMe_IB2002:checked + i {
    	border-color:red;
    }
    
    .checkBoxGroup #describeMe_IB2003:checked + i {
    	border-color:green;
    }
    
    .checkBoxGroup #describeMe_IB2004:checked + i {
    	border-color:magenta;
    }
    Latter checkbox borders trump previous ones, but that could be gotten around by creating special cases with the adjacent sibling selector, or playing with z-index depending if you want a different colour state for multiple checkboxes selected, or if you want a different one to take precedence regardless of source order.

    NO JAVASCRIPT NEEDED!

    The same technique could be used with your checkboxes creating that faux-select; though really lose the tables for layout, that's not tabular data so that markup is complete gibberish.

    JS for nothing and your scripts for free; that ain't workin', that's not how you do it.
    Last edited by deathshadow; Nov 10th, 2018 at 08:37 PM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  12. #11
    New Coder
    Join Date
    Jun 2016
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Excuse deathshadow, it is clear that I can not explain well what I need. I look for codes made by others, because I'm not able to create them by myself, so I can not answer your questions. Whatever solution you can give me to do things better, that's fine with me. I asked xelawho, because he already knows what I'm doing. I would like to get the features I described, applied to my example. A good alternative to drop-down checkboxes would be to use multiple select options lists and copy the value of each of them in the textarea, but I don't know if this is possible. Thank you for your kindness
    Last edited by Cosina; Nov 10th, 2018 at 10:10 PM.

  13. #12
    New Coder
    Join Date
    Jun 2016
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    In the end I managed to find the solution. Thank you all and sorry for disturbing

  14. #13
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    TX
    Posts
    3,935
    Thanks
    65
    Thanked 601 Times in 595 Posts
    Quote Originally Posted by Cosina View Post
    In the end I managed to find the solution. Thank you all and sorry for disturbing
    So can you show your solution for others to learn from?


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •