CODEWITHSUNDEEP
jqueryhtmlcssradio-button
random_geek
random_geek

Reputation: 365

Custom radio box CSS on change

I have a radio box which I have customized to look like a square checkbox. On change the selected radio buttons CSS is changed.

 $("input:radio").on('change', function() {
              $('.items-inner-wrapper li.highlight').removeClass('highlight');
       $(this).closest('li').addClass('highlight');


        });
.items-wrapper {
    float: left;
    width: 50%;
}
.items-text-field-wrapper {
    width: 100%;
}
.items-wrapper ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.items-wrapper ul li {
    float: left;
    width: 70%;
}
.items-wrapper ul li label,
.items-wrapper.items-text-field-wrapper label {
    color: #313131;
    font-family: "Open Sans", Helvetica Neue, Sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin: 0px 0 12px 15px;
    line-height: normal;
    padding: 0;
    white-space: normal;
    width: 70%;
    display: inline-block;
    cursor: pointer;
}
.items-wrapper.items-text-field-wrapper label {
    width: auto;
}
.items-wrapper input[type=radio], 
.items-wrapper input[type=checkbox] {
    margin: 0;
    opacity: 0;
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.items-wrapper ul li.items-input-wrapper {
    width: 24px;
    height: 24px;
}
.items-wrapper ul li.items-input-wrapper:after {
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 2px;
}
.items-wrapper ul li.items-input-wrapper.highlight:after {
    -webkit-box-shadow: 0 0 0 2px rgba(0,0,0,.9);
    box-shadow: 0 0 0 2px rgba(0,0,0,.9);
    background-color: #000;
}


.items-image-wrapper ul li.items-input-wrapper {
    float: none;
    opacity: 0;
    position: absolute;
    z-index: 4;
    right: 0;
    width: 100%;
    height: 100%;
}
.items-image-wrapper ul li.items-input-wrapper input[type=radio] {
    width: 100%;
    height: 100%;
}
.items-image-wrapper ul li.items-label-wrapper {
    width: 100%;
    float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
    <div>
        <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper ">
					<input type="radio" name="Face" value="DeepMill">
                </li>
                <li class="items-label-wrapper">
                    <label>Deep Mill</label>
                </li>
            </ul>
          </div>
          <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper ">
                     <input type="radio" name="Face" value="MidMill">
                </li>
                <li class="items-label-wrapper">
                    <label>Mid Mill</label>
                </li>
            </ul>
          </div>
         </div>   
        <div>
    <div>
	A different radio button set
	<div>
        <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper highlight">
					<input type="radio" name="FaceEngraving" value="LK">
                </li>
                <li class="items-label-wrapper">
                    <label>LK</label>
                </li>
            </ul>
          </div>
          <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper ">
                     <input type="radio" name="FaceEngraving" value="Logo">
                </li>
                <li class="items-label-wrapper">
                    <label>Logo</label>
                </li>
            </ul>
          </div>
         </div>   
        <div>
    <div>

The problem is - When there is a radio button change I want only the previously selected radio of that group to be cleared and not all the other radio buttons. How do I fix this?

Upvotes: 1

Views: 235

Answers (2)

Fiido93
Fiido93

Reputation: 1978

I have tweak abit your html code. You almost there actually. It just you need to assigned different class for div to differentiate where it targeted. For name Face the parent div i assigned are various1 and for the name Facengraving i assigned the parent name are various2. Then we can start differentiate it. Try play the demo.

Have a nice day

Try here DEMO

HTML

<div class="various1">
    <div class="items-wrapper">
        <ul class="items-inner-wrapper">
            <li class="items-input-wrapper ">
                <input type="radio" name="Face" value="DeepMill">
            </li>
            <li class="items-label-wrapper">
                <label>Deep Mill</label>
            </li>
        </ul>
      </div>
      <div class="items-wrapper">
        <ul class="items-inner-wrapper">
            <li class="items-input-wrapper ">
                 <input type="radio" name="Face" value="MidMill">
            </li>
            <li class="items-label-wrapper">
                <label>Mid Mill</label>
            </li>
        </ul>
      </div>
     </div>   
    <div>
<div>
A different radio button set
<div class="various2">
    <div class="items-wrapper">
        <ul class="items-inner-wrapper">
            <li class="items-input-wrapper">
                <input type="radio" name="FaceEngraving" value="LK">
            </li>
            <li class="items-label-wrapper">
                <label>LK</label>
            </li>
        </ul>
      </div>
      <div class="items-wrapper">
        <ul class="items-inner-wrapper">
            <li class="items-input-wrapper ">
                 <input type="radio" name="FaceEngraving" value="Logo">
            </li>
            <li class="items-label-wrapper">
                <label>Logo</label>
            </li>
        </ul>
      </div>
     </div>   
    <div>
<div>

JS

$(".various1 input:radio").on('change', function() {
   if ($(this).is(":checked")) {
     $(this).closest('li').addClass('highlight');
     $('.various1 input:radio:not(:checked)').closest('li').removeClass('highlight');
  }
});


$(".various2 input:radio").on('change', function() {
   if ($(this).is(":checked")) {
     $(this).closest('li').addClass('highlight');
     $('.various2 input:radio:not(:checked)').closest('li').removeClass('highlight');
  }
});

Upvotes: 0

Fadi Nouh
Fadi Nouh

Reputation: 354

you can contain every group set in a div ( no change on css)

 $("input:radio").on('change', function() {
    $(this).closest('.radio-set').find ('li.highlight').removeClass('highlight');
    $(this).closest('li').addClass('highlight');
});
.items-wrapper {
    float: left;
    width: 50%;
}
.items-text-field-wrapper {
    width: 100%;
}
.items-wrapper ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.items-wrapper ul li {
    float: left;
    width: 70%;
}
.items-wrapper ul li label,
.items-wrapper.items-text-field-wrapper label {
    color: #313131;
    font-family: "Open Sans", Helvetica Neue, Sans-serif;
    font-size: 16px;
    font-weight: 400;
    margin: 0px 0 12px 15px;
    line-height: normal;
    padding: 0;
    white-space: normal;
    width: 70%;
    display: inline-block;
    cursor: pointer;
}
.items-wrapper.items-text-field-wrapper label {
    width: auto;
}
.items-wrapper input[type=radio], 
.items-wrapper input[type=checkbox] {
    margin: 0;
    opacity: 0;
    width: 24px;
    height: 24px;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.items-wrapper ul li.items-input-wrapper {
    width: 24px;
    height: 24px;
}
.items-wrapper ul li.items-input-wrapper:after {
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    box-shadow: 0 0 0 1px rgba(0,0,0,.4);
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 24px;
    height: 24px;
    border-radius: 2px;
}
.items-wrapper ul li.items-input-wrapper.highlight:after {
    -webkit-box-shadow: 0 0 0 2px rgba(0,0,0,.9);
    box-shadow: 0 0 0 2px rgba(0,0,0,.9);
    background-color: #000;
}


.items-image-wrapper ul li.items-input-wrapper {
    float: none;
    opacity: 0;
    position: absolute;
    z-index: 4;
    right: 0;
    width: 100%;
    height: 100%;
}
.items-image-wrapper ul li.items-input-wrapper input[type=radio] {
    width: 100%;
    height: 100%;
}
.items-image-wrapper ul li.items-label-wrapper {
    width: 100%;
    float: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
    <div class="radio-set">
        <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper ">
					      <input type="radio" name="Face" value="DeepMill">
                </li>
                <li class="items-label-wrapper">
                    <label>Deep Mill</label>
                </li>
            </ul>
          </div>
          <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper ">
                     <input type="radio" name="Face" value="MidMill">
                </li>
                <li class="items-label-wrapper">
                    <label>Mid Mill</label>
                </li>
            </ul>
          </div>
         </div>   
        <div>
    <div>
	A different radio button set
	<div class="radio-set">
        <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper highlight">
					<input type="radio" name="FaceEngraving" value="LK">
                </li>
                <li class="items-label-wrapper">
                    <label>LK</label>
                </li>
            </ul>
          </div>
          <div class="items-wrapper">
            <ul class="items-inner-wrapper">
                <li class="items-input-wrapper ">
                     <input type="radio" name="FaceEngraving" value="Logo">
                </li>
                <li class="items-label-wrapper">
                    <label>Logo</label>
                </li>
            </ul>
          </div>
         </div>   
        <div>
    <div>

Upvotes: 1

Related Questions