checkBox selected style settings

Sometimes you need to use checkboxes, such as selecting multiple areas in the area box, etc. For example, in the takeaway service area, the selection is multi-select, and the checkbox style box is generally hidden. Only the label font and the set outer border are left for selection style control to improve the user experience. At this time, one of the methods I summarize to deal with the checkbox is to set it according to the checked example:

<p>
      <input name="area" type="checkbox" value="1" id="check1"/>
       <label for="check1">桥西区</label>
 </p>

 Here I write the checkbox and label in the p tag, so that the text can be selected by clicking on it. When selected, the style controls:

/* beneficiation */
        .select-ul li p label,
        .type-list-ul li p label{
            font-size: 0.28rem;color: #666;
            width: 100%;height: 100%;display:  inline-block;
            border-color: #666;
            border-style: solid;
            border-width: 1px;
            border-radius: 0.1rem;
        }
        .type-list-ul li p label{width: auto;padding: 0 0.1rem;}
        .select-ul li p{
            height: 0.5rem;
            width: 1.5rem;
            display: inline-block;
            line-height: 0.5rem;
        }
        .type-list-ul li p{
            /*padding: 0 0.1rem;*/
            height: 0.5rem;
            /* width: 1.5rem; */
            display: inline-block;
            line-height: 0.5rem;
        }
        .select-ul li p input[type=checkbox]:checked + label,
        .type-list-ul p input[type=checkbox]:checked + label{
            border-color: #FA8072;
            color: #FA8072;
        }

 The conclusion is that I pass

.select-ul li p input[type=checkbox]:checked + label{}

To control the style, the general area selection will hide the checkbox style, leaving only the font box, which will change color after clicking to improve the user experience. Expansion:

When making a web page, there is generally a requirement: click on a piece of text information and select a checkbox at the same time

The old processing method is to add a click event to this text to trigger the selection of the checkbox

//jq in:
//选中
$("#ID").attr("checked","checked");
//不选中
$("#ID").removeAttr("checked");
//in js:
 var boxes = document.getElementsByName("test");
 boxes[i].checked = true;

Here is a convenience method:

<p>
   <input name="fittype" type="checkbox" value="8" id="checkin8"/>
   <label for="checkin8">其他</label>
</p>

Put the input and the label in the same label p, and the value of the for attribute of the label is equal to the value of the id attribute of the input, so that you can click the label and control the input at the same time.