Add a class to a DIV when a checkbox is selected within DIV-CodePudding

I am attempting to add a class to a div if the checkbox within it is selected.

For example, the following are a group of checkboxes. If checkbox with label Physician Name1 is selected, I would like to add class to the div that contains the class phys1. If user selects Physician Name2, remove the border from previous selection and add class to the div that contains phys2.

<div >
    <div >
        <div >
            <input type="checkbox"> <label >Physician Name1</label>
        </div>
        <div >
            Address: Address<br />
            Line 1, Address<br />
            Address Line 2
        </div>
    </div>
    <div >
        <span ><input type="checkbox"> <label >Physician Name2</label></span><br />
        <span >
            Address: Address<br />
            Line 1, Address<br />
            Address Line 2
            </span>
    </div>
    <div >
        <span ><input type="checkbox"> <label >Physician Name3</label></span><br />
        <span >
            Address: Address<br />
            Line 1, Address<br />
            Address Line 2
        </span>
    </div>
</div>

CodePudding user response：

This code checks if the checkbox is checked on click then goes up to the closest div adding him a class. Changed one of the div's to span so it will work as expected.

$("[type=checkbox]").click(function(ev) {
  $(this).closest("div").toggleClass("active", this.checked);

})

.active {
  background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >
    <span >
      <input type="checkbox"> <label >Physician Name1</label>
    </span>
    <div >
      Address: Address<br /> Line 1, Address<br /> Address Line 2
    </div>
  </div>
  <div >
    <span ><input type="checkbox"> <label >Physician Name2</label></span><br />
    <span >
            Address: Address<br />
            Line 1, Address<br />
            Address Line 2
            </span>
  </div>
  <div >
    <span ><input type="checkbox"> <label >Physician Name3</label></span><br />
    <span >
            Address: Address<br />
            Line 1, Address<br />
            Address Line 2
        </span>
  </div>
</div>

CodePudding user response：

You can get the closest ancestor by a class and then toggle a class based on the checkbox value (checked or not) pretty easily. I added some CSS and a background color just to illustrate.

Note I used both a click and a change so it honors the change no matter how the checked property gets altered.

$('input[type="checkbox"]').on(change', function(event) {
  console.log(event.type);
  let isChecked = this.checked;
  $(this).closest('.phys-group').toggleClass("cheese", isChecked);
});

.phys-group{
border: solid 1px #DDFFDD;
}
.phys-group.cheese {
  background-color: #FFEEEE;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div >
<div >
  <div >
    <div >
      <input type="checkbox"> <label >Physician Name1</label>
    </div>
    <div >
      Address: Address<br /> Line 1, Address<br /> Address Line 2
    </div>
  </div>
  <div >
    <span ><input type="checkbox"> <label >Physician Name2</label></span><br />
    <span >
            Address: Address<br />
            Line 1, Address<br />
            Address Line 2
            </span>
  </div>
  <div >
    <span ><input type="checkbox"> <label >Physician Name3</label></span><br />
    <span >
            Address: Address<br />
            Line 1, Address<br />
            Address Line 2
        </span>
  </div>
</div>
</div>