使用Javascript

时间：2017-12-13 10:44:29

标签： javascript jquery html css

我很好奇，如果这是可能的......

从我的搜索中，我在这里发现了this问题，但它似乎与我的困境有点不同。

对于那些不关心检查帖子的人，有人试图通过按下一个单选按钮（放置在被替换的同一个div中）来刷新div。从答案看来，它是成功的。

我的问题

我正在研究以这种方式设置的项目：

  • 单选按钮行指示他们想要选择一周中的天数（3天或5天），或仅显示1天。
  • 如果用户选择1 day，则不
    • 的行下会有一个不可见的div。
  • 如果用户选择3天或5天，则会在行的下方显示一个不可见的div，其中包含一周的日期。
  • 如果用户选择3 days，则他们只能点击3天，然后其他4个被禁用（这些＆＃34; day＆＃34;按钮是复选框）
  • 如果用户选择5 days，您猜对了，他们就可以选择5天。
  • 如果用户然后重新选择 3 days，那么他们必须取消选择所有日期，并重新选择它们以便强制执行3天限制，考虑到他们已经已选择5 days的选定日期。
  • 选中复选框后，会激活CSS样式，然后其颜色会发生变化。

我想做什么

我正在努力让我的布局以这种的方式运作：

  • 如果用户选择5 days，请照常营业。
  • 如果用户然后选择3 days，我希望隐形div（现在可见，因为one day不是选中的选项）来刷新自己：我的意思是删除了CSS样式，取消选中所有复选框。

我的代码

＆＃13;
＆＃13; 
$("document").ready(function() {
  $('input[name=timing]').on('change', function() {
    if ($(this).prop('id') == "one") {
      $('#recurrence_time').html('One Time');
      $('.day-selections').hide();
    } else if ($(this).prop('id') == "thrice") {
      $('#recurrence_time').html('3 Times a Week');
      $('.day-selections').show();
    } else if ($(this).prop('id') == "once") {
      $('#recurrence_time').html('Once a Week');
      $('.day-selections').hide();
    } else if ($(this).prop('id') == "custom") {
      $('#recurrence_time').html('Custom');
      $('.day-selections').show();
    }
  });
});

$(":checkbox[name=day]").change(function() {
  if ($('input#thrice').is(':checked')) {
    var len = 3;
  } else if ($('input#custom').is(':checked')) {
    var len = 5;
  }
  if ($(":checkbox[name=day]:checked").length == len) {
    $(':checkbox:not(:checked)').prop('disabled', true);
  } else {
    $(':checkbox:not(:checked)').prop('disabled', false);
  }
});

function updateHighlightRadio() {
  var selected = this.parentNode.parentNode.getElementsByClassName("selected")[0];
  if (selected) selected.className = selected.className.replace(" selected", "");
  this.parentNode.className += " selected";
}

window.onload = function() {
  var radios = document.querySelectorAll("input[type=radio]");
  for (var i = 0; i < radios.length; ++i) {
    radios[i].onchange = updateHighlightRadio;
  }
}

$("input[type='checkbox']").change(function() {
  $(this).closest("label").toggleClass(" selected");
});
＆＃13; 
.selected {
  background-color: #FF8C00;
  color: #FFFFFF;
}

.how-often p {
  font-weight: bold;
  text-align: left;
  display: inline;
  float: left;
}


/* button label */

.recurrence {
  border-radius: 8px;
  padding: 1em;
  margin: 0.5em;
  border-radius: 5px;
  background-color: #ffd199;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  width: 115px;
  text-align: center;
  font-size: 12px;
}


/* remove radio button */

.recurrence input {
  visibility: hidden;
  position: absolute;
}


/* color change when hovering */

.recurrence:hover {
  background-color: #FF8C00;
}

.days {
  border-radius: 8px;
  padding: 1em;
  margin: 0.5em;
  border-radius: 5px;
  background-color: #ffd199;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  width: 75px;
}


/* remove radio button */

.days input {
  visibility: hidden;
  position: absolute;
}


/* color change when hovering */

.days:hover {
  background-color: #FF8C00;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="how-often pricing">
  <p>How often?</p>
  <label class="recurrence">
                            <input required id="one" name="timing" type="radio">Once
                        </label>
  <label class="recurrence">
                            <input id="once" name="timing" type="radio">Once a week
                        </label>
  <label class="recurrence">
                            <input id="thrice" name="timing" type="radio">3 Times a week
                        </label>
  <label class="recurrence">
                            <input id="custom" name="timing" type="radio">Custom
                        </label>
  <hr>
</div>

<!--start day selection section-->
<div class="day-selections" style="display: none;">
  <p>Which days?</p>
  <label class="days">
                            <input id="mon" name="day" type="checkbox">
                            Monday
                        </label>
  <label class="days">
                            <input id="tue" name="day" type="checkbox">
                            Tuesday
                        </label>
  <label class="days">
                            <input id="wed" name="day" type="checkbox">
                            Wednesday
                        </label>
  <label class="days">
                            <input id="thu" name="day" type="checkbox">
                            Thursday
                        </label>
  <label class="days">
                            <input id="fri" name="day" type="checkbox">
                            Friday
                        </label>
  <hr>
</div>
＆＃13;
＆＃13;
＆＃13;

注意：出于某种原因，我在片段中选择按钮后，无法让按钮保持新颜色...

1 个答案:

答案 0 :(得分：2)

你走了。您需要做出的更改：

  • 在演示时添加类和ID，而不是使用javascript，您可以使用CSS：选中选择器并在选中时更改样式。

  • 保持标签和输入分开而不是嵌套，这样您就可以使用标签中的for属性连接到复选框并使用CSS display:none隐藏复选框。

  • 如果在选择其他单选按钮时取消选中复选框，请确保从每个if-else条件$('input.day').removeAttr('checked');的代码中显示的所有复选框中删除选中的属性，比较限制值每个单选按钮，如果超出限制，请使用代码并将其返回false，这样就无法选择其他复选框。

    if ($(this).siblings(':checked').length >= limit) { this.checked = false; } 

$("document").ready(function() {

  $(".day-selections").hide();
  var limit = 0;
  $(':radio').click(function() {
    if ($('.notone').is(':checked')) {
      $(".day-selections").show();
      if ($('#thrice').is(':checked')) {
        limit = 3;
        $('input.day').removeAttr('checked');
        $('input.day').on('change', function(evt) {
          if ($(this).siblings(':checked').length >= limit) {
            this.checked = false;
          }
        });
      } else if ($('#custom').is(':checked')) {
        limit = 5;
        $('input.day').removeAttr('checked');
        $('input.day').on('change', function(evt) {
          if ($(this).siblings(':checked').length >= limit) {
            this.checked = false;
          }
        });
      }
    } else {
      $('input.day').removeAttr('checked');
      $(".day-selections").hide();
    }
  });

});
.selected {
  background-color: #FF8C00;
  color: #FFFFFF;
}

.how-often p {
  font-weight: bold;
  text-align: left;
  display: inline;
  float: left;
}


/* button label */

.recurrence {
  border-radius: 8px;
  padding: 1em;
  margin: 0.5em;
  border-radius: 5px;
  background-color: #ffd199;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  width: 115px;
  text-align: center;
  font-size: 12px;
}


/* remove radio button */

.recurrence input {
  visibility: hidden;
  position: absolute;
}


/* color change when hovering */

.recurrence:hover {
  background-color: #FF8C00;
}

.days {
  border-radius: 8px;
  padding: 1em;
  margin: 0.5em;
  border-radius: 5px;
  background-color: #ffd199;
  color: #FFFFFF;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  font-size: 12px;
  width: 75px;
}

.day:checked+.days {
  background-color: #FF8C00;
}

.option {
  display: none;
}

.option:checked+.recurrence {
  background-color: #FF8C00;
}


/* remove radio button */

.day {
  display: none;
}

.days-selection {
  display: flex;
}


/* color change when hovering */

.days:hover {
  background-color: #FF8C00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="how-often pricing">
  <p>How often?</p>

  <input required id="one" class="option" name="timing" type="radio">
  <label class="recurrence" for="one">Once</label>

  <input id="once" name="timing" class="option" type="radio">
  <label class="recurrence" for="once">Once a week</label>

  <input id="thrice" class="notone option" name="timing" type="radio">
  <label class="recurrence" for="thrice">3 Times a week</label>

  <input id="custom" class="notone option" name="timing" type="radio">
  <label class="recurrence" for="custom">Custom</label>
  <hr>
</div>
<!--start day selection section-->
<div class="day-selections" style="display: none;">
  <input id="mon" class="day" name="day" type="checkbox">
  <label class="days" for="mon">Monday
	</label>
  <input id="tue" class="day" name="day" type="checkbox">
  <label class="days" for="tue">Tuesday
	</label>
  <input id="wed" class="day" name="day" type="checkbox">
  <label class="days" for="wed">Wednesday
	</label>
  <input id="thu" class="day" name="day" type="checkbox">
  <label class="days" for="thu">Thursday</label>
  <input id="fri" class="day" name="day" type="checkbox">
  <label class="days" for="fri">Friday
	</label>
  <hr>
</div>

相关问题
最新问题