Web Analytics Made Easy -
StatCounter Changing element's attributes - CodingForum

Announcement

Collapse
No announcement yet.

Changing element's attributes

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Changing element's attributes

    I am trying to change the border color around the div checkbox group, to turn red after 2 checkboxes have been clicked

    The javascript:
    Code:
    Code:
    $(document).ready(function() {
    		var borDiv = document.getElementById("#checkbox_group")
        $(".cbox").on("click", function() {
            var numberOfChecked = $('input.cbox:checkbox:checked').length;
            if (numberOfChecked > 2) {
                $(this).prop('checked', false);
                if ('checked' == false){
                	$(this).find("#checkbox_group").css({"border-color":"red"});
                }
            }
        });
    });
    html:
    Code:
    Code:
    <div id="checkbox_group">
                <label>Sports</label><input type="checkbox" class="cbox" name="Sports" value="Sports" onclick="check();" >
                <label>News</label><input type="checkbox" class="cbox" name="News" value="News" onclick="check();" >
                <label>Entertainment</label><input type="checkbox" class="cbox" name="Entertainment" value="Entertainment" onclick="check();" >
                <label>Music</label><input type="checkbox" class="cbox" name="Music" value="Music" onclick="check();" >
    </div>
    the css:
    Code:
    Code:
    #checkbox_group{
                    border: solid black 1px;               
                }

  • #2
    Don't know why you have "onclick" in checkbox and never use it.
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Theme</title>
    <style type="text/css">
    #checkbox_group{
    	border: solid black 1px;               
    }
    </style>
    </head>
    <body>
    
    <div id="checkbox_group">
    	<label>Sports</label>
    	<input type="checkbox" class="cbox" name="Sports" value="Sports" ><br>
    	<label>News</label>
    	<input type="checkbox" class="cbox" name="News" value="News" ><br>
    	<label>Entertainment</label
    	><input type="checkbox" class="cbox" name="Entertainment" value="Entertainment" ><br>
    	<label>Music</label>
    	<input type="checkbox" class="cbox" name="Music" value="Music" >
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
    var borDiv = document.getElementById("#checkbox_group")
    $(".cbox").on("click", function() {
        var numberOfChecked = $('input.cbox:checkbox:checked').length;
    	if (numberOfChecked > 2) {
    		$("#checkbox_group").css({"border-color":"red"});
        }else{
    		$("#checkbox_group").css({"border-color":"black"});
    	}
    });
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

    Comment


    • #3
      Code:
      if ('checked' == false){
      note: a non-empty string is never false.
      The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
      André Behrens, NY Times Software Developer

      Comment


      • #4
        Originally posted by sunfighter View Post
        Don't know why you have "onclick" in checkbox and never use it.
        Code:
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <title>Theme</title>
        <style type="text/css">
        #checkbox_group{
        	border: solid black 1px;               
        }
        </style>
        </head>
        <body>
        
        <div id="checkbox_group">
        	<label>Sports</label>
        	<input type="checkbox" class="cbox" name="Sports" value="Sports" ><br>
        	<label>News</label>
        	<input type="checkbox" class="cbox" name="News" value="News" ><br>
        	<label>Entertainment</label
        	><input type="checkbox" class="cbox" name="Entertainment" value="Entertainment" ><br>
        	<label>Music</label>
        	<input type="checkbox" class="cbox" name="Music" value="Music" >
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
        var borDiv = document.getElementById("#checkbox_group")
        $(".cbox").on("click", function() {
            var numberOfChecked = $('input.cbox:checkbox:checked').length;
        	if (numberOfChecked > 2) {
        		$("#checkbox_group").css({"border-color":"red"});
            }else{
        		$("#checkbox_group").css({"border-color":"black"});
        	}
        });
        </script>
        </body>
        </html>
        It has to include the code I have given as it also disables more checkboxes to be selected

        Comment


        • #5
          Originally posted by JavaCSSJunkie View Post
          It has to include the code I have given as it also disables more checkboxes to be selected
          So put it back in. Does my code work for you?
          Evolution - The non-random survival of random variants.
          Physics is actually atoms trying to understand themselves.

          Comment


          • #6
            Originally posted by sunfighter View Post
            So put it back in. Does my code work for you?
            To a point, but it only turns red when I clicked the third one which would is disabled by the time I clicked it

            Comment


            • #7
              Oh I see where I went wrong with the CSS inside the jquery/javascript

              Comment


              • #8
                This is just an update on the script, it's changing color, but I like it to change when it reaches two and not having to click on another checkbox in order for it to change said colour when that has already been disabled

                Code:
                $(document).ready(function() {
                    //var borDiv = document.getElementById("#checkbox_group");
                    $(".cbox").on("click", function(){
                        var numberOfChecked = $('input.cbox:checkbox:checked').length;
                <br>
                        if (numberOfChecked > 2){
                            $(this).prop('checked', false);
                            $("#checkbox_group").css({"border-color":"red"});
                        } else {
                            $("#checkbox_group").css({"border-color":"black"});
                	}
                    });
                });
                Please note, there is something wrong with the CODE tag, that it won't accept a carriage return, I tried to put in a BR tag in the middle, hence the lenthr> at the end

                Comment


                • #9
                  Originally posted by JavaCSSJunkie View Post
                  Please note, there is something wrong with the CODE tag, that it won't accept a carriage return, I tried to put in a BR tag in the middle, hence the lenthr> at the end
                  I fixed that in my code.

                  or the change to occur at the second checkbox change
                  Code:
                  if (numberOfChecked > 2) {
                  To
                  Code:
                  if (numberOfChecked >= 2) {
                  Evolution - The non-random survival of random variants.
                  Physics is actually atoms trying to understand themselves.

                  Comment

                  Working...
                  X