Настраиваемый CSS-код радиообмена при изменении

У меня есть радио-бокс, который я настроил так, чтобы он выглядел как квадратный флажок. При изменении выбранных радиокнопок изменяется CSS.

 $("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>

Проблема в - Когда есть изменение переключателя, я хочу, чтобы был очищен только ранее выбранный переключатель этой группы, а не все другие переключатели. Как это исправить?

jquery html css radio-button

27.10.2018 11:04

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

вы можете содержать каждую группу, установленную в div (без изменений в 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>

27.10.2018 11:07

Я настроил ваш html-код. Вы почти у цели. Просто вам нужно назначить другой класс для div, чтобы различать, на что он нацелен. Для имени Face родительский div, который я назначил, различен1, а для имени Facengraving, которое я назначил родительское имя, различны2. Тогда мы сможем начать его дифференцировать. Попробуйте поиграть в демо.

Хорошего дня

Попробуйте здесь ДЕМО

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>

$(".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');
  }
});

27.10.2018 11:48

Другие вопросы по теме

Название карусели исчезает

Как установить jscolor chooser на кнопку BS

Локальное хранилище JavaScript не сохраняет или не получает информацию

Значения PHP $ _SESSION не меняются

Как изменить цвет текста в теге marquee при каждом обновлении

Почему я не могу переместить некоторые из моих столов с позиционированием?

Ошибка AJAX при обработке данных ответа для отображения

JSOUP подсчитывает общее количество элементов в теге карты

Ошибка TS2339: свойство "дата" не существует для типа "Комментарий"

Определите, просматривается ли страница в стандартном браузере Samsung или как отдельное веб-приложение

Настраиваемый CSS-код радиообмена при изменении

Ответы 2

Другие вопросы по теме

Похожие вопросы