Пользовательское радио окно CSS при изменении - PullRequest
Новая
       2

Пользовательское радио окно CSS при изменении

0 голосов
/ 27 октября 2018

У меня есть радио-блок, который я настроил так, чтобы он выглядел как квадратный флажок. При изменении выбранных радиокнопок 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>

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

Ответы [ 2 ]

0 голосов
/ 27 октября 2018

Я настроил ваш 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>

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');
  }
});
0 голосов
/ 27 октября 2018

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

Нет похожих вопросов

...