On click of check box my div border and text color should be in Blue

[shahzadsiddiqui8]

Hi,

I am trying to do something on checkbox When my checkbox “checked” then my div border and text color should change from Grey to Blue ELSE it should display as it is, as shown in the image, below is my working of HTML and CSS.

I tried it through Jquery but not getting satisfactory result please suggest me some jquery/JavaScript code how i can achieve this.

**for GREY Div I am using below HTML:**

<div class="boxContent" style="height: 277px;">
	<div class="boxPadding">
		<div class="rsx-checkboxes rsx-checkboxes_absolute init" data-widget="checkboxes">
			<div class="floatL">
				<label class="graphical_ctrl font-normal pointer graphical_ctrl_checkbox">
					<input hasbogos="False" isconditionalsoc="False" basesocid="" browsecatid="72179471" id="P50LDOP" issalesind="False" isshareable="False" name="chkNewFeatures-P50LDOP" onclick="UpdateFeatures(this,false);  " socname="50 Canadian LD minutes" value="true" class="RPR_features_7" type="checkbox">
					<input name="chkNewFeatures-P50LDOP" value="false" type="hidden">
					<span class="ctrl_element2 chk_radius"></span>
				</label>
		<div class="featuresHeading marginLeft24 marginLeft40" style="cursor: pointer;" for="P50LDOP" id="val-P50LDOP">
			
			
50 Cfhjf kfjf kffjffj                        </div>

		<div class="spacer3" style="margin-left: 10px;">
			<span class="size1 color2 priceMo marginLeft30">
				$5.00/mo.
			</span>
		</div>
			</div>
		</div>
	</div>
</div>

CSS:
.featuresHeading{
font-size:18px;
color:#222;
font-family: "GTWalsheim",Helvetica,Arial,sans-serif !important;
font-weight:bold;
}

.boxContent {
    background-color: #fff;    
    width: 100%;
	border:2px solid #ccc;	
}

for better understanding here is my screenshot.

[Paul_Wilkins]

@shahzadsiddiqui8

Hi,

I am trying to do something on checkbox When my checkbox “checked” then my div border and text color should change from Grey to Blue ELSE it should display as it is, as shown in the image, below is my working of HTML and CSS.

That seems to be quite easy to do.

The added CSS is:

.isChecked {
  color: blue;
  border:2px solid blue;
}

and the added JavaScript is:

function UpdateFeatures(checkbox) {
  var boxContent = document.querySelector(".boxContent");
  boxContent.classList.remove("isChecked");
  if (checkbox.checked) {
    boxContent.classList.add("isChecked");
  }
}

No jQuery is needed here at all.

The updated code can be seen at https://jsfiddle.net/bq0h3a09/

[shahzadsiddiqui8]

Thanks for your reply Paul,
I checked your jsfiddle, on click of check box you are replacing the color of sub-heading i.e. “$5.00/mo.” I need to change the color of both heading and sub-heading i.e. “50 Cfhjf kfjf kffjffj” and “$5.00/mo.”

I need to change the colors of heading and sub-heading both on check box click…

thanks once again for your quick reply…

[PaulOB]

@shahzadsiddiqui8

I need to change the color of both heading and sub-heading

Just use the ‘isChecked’ class that Paul added to the main container and then you can style descendant elements as required.

e.g.

.isChecked .featuresHeading{color:blue}