Question

在下面的代码片段中，您会看到我正在设置一个单选按钮，看起来像一个按钮。我希望这些按钮能够正常工作，就像单选按钮处于正常状态一样。现在，两个单选按钮都在我的javascript页面加载active类上。只有在选中它们时才会发生这种情况。

此外，来自fadeToggle的{{1}}在单选按钮下产生额外输入的功能就像单选按钮是复选框一样。我必须点击两次相同的按钮才能取消激活它。我认为这是基于上述问题。

有没有人有任何想法我做错了什么？

if-statement

var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
  $('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
  var radioCheck = $('.radio', this).val();
  $('.radioTransform', this).toggleClass('active');
  console.log(radioCheck);
  if (radioCheck == 'Yes') {
    $('#ansYes').fadeToggle(400);
  }
});

.radio {
  display: none;
}

#pushR {
  margin-right: 25px;
}

.radioTransform {
  width: 220px;
  display: inline-block;
  vertical-align: top;
  background: #dbc8ca;
  cursor: pointer;
  padding: 15px 0;
}

.radioTransform.active {
  background: red;
}

.radioAnswer {
  font-family: 'Open Sans', sans-serif;
  font-size: .9rem;
  text-align: center;
}

#ansYes {
  display: none;
}

Answer 1

你根本不需要Javascript - 只有一些智能CSS和你的标记的轻微重组。此更改甚至可以提高解决方案的语义价值和可访问性。

我只为某些console.logging添加了Javascript，因此您可以看到该代码段正常运行。

请注意，为了使单选按钮按预期工作，他们需要共享name属性，否则两者都可以“开启”。

const radios = Array.from(document.querySelectorAll('[name="yesno"]'))

for (const radio of radios) {
  radio.addEventListener('change', function() {
    value.textContent = document.querySelector('[name="yesno"]:checked').value
  })
}

.radio {
  display: none;
}

.radioAnswer {
  width: 220px;
  display: inline-block;
  vertical-align: top;
  background: #dbc8ca;
  cursor: pointer;
  padding: 15px 0;
  transition-duration: .4s;
  position: relative;
}

.radioAnswer::before {
  display: inline-block;
  content: "";
  border-width: 0 2px 2px 0;
  border-color: transparent;
  border-style: solid;
  width: 0;
  height: 0;
  transition: width .4s linear .1s, 
    height .2s linear 1.6s;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: rotate(35deg) translateY(-50%);
  transform-origin: center right;
}

input[type=radio]:checked+.radioAnswer {
  background: #0a0;
  color: #fff;
}

input[type=radio]:checked+.radioAnswer::before {
  border-color: #fff;
  transform: rotate(35deg) translateY(-50%);
  height: 1.5em;
  width: .8em;
  transition: all .4s linear 0s, width .4s linear .1s, height .2s linear .3s
;  position: absolute;
}

.radioAnswer {
  font-family: 'Open Sans', sans-serif;
  font-size: .9rem;
  text-align: center;
}

<input type="radio" value="Yes" class="radio" name="yesno" id="yes">
<label class="radioAnswer" for="yes">Yes</label>
<input type="radio" value="No" class="radio" name="yesno" id="no">
<label class="radioAnswer" for="no">NO</label>
<p>Selected Value: <strong id="value"></strong></p>

Answer 2

if条件块仅在单击是按钮时有效。然后，如果你点击否，如果这个条件你可以有其他声明。在此代码radioTransform中，div没有活动的加载类。

＆＃13;

var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
  $('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
  var radioCheck = $('.radio', this).val();
  console.log(radioCheck);
  
  $(this).toggleClass('active');
  if (radioCheck == 'Yes') {
    $('#ansYes').fadeToggle(400);
   if($(this).next('.radioTransform').hasClass('active')){
    $(this).next('.radioTransform').removeClass('active');
   }
  } else {
    $('#ansYes').fadeOut(400);
  if($(this).prev('.radioTransform').hasClass('active')){
   $(this).prev('.radioTransform').removeClass('active');
   }
  }
});

＆＃13;

.radio {
  display: none;
}

#pushR {
  margin-right: 25px;
}

.radioTransform {
  width: 220px;
  display: inline-block;
  vertical-align: top;
  background: #dbc8ca;
  cursor: pointer;
  padding: 15px 0;
}

.radioTransform.active {
  background: red;
}

.radioAnswer {
  font-family: 'Open Sans', sans-serif;
  font-size: .9rem;
  text-align: center;
}

#ansYes {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="rsvpForm">
  <div class="formField">
    <div class="radioTransform" id="pushR">
      <span class="radioAnswer">YES</span>
      <input type="radio" value="Yes" class="radio">
    </div>
    <div class="radioTransform">
      <span class="radioAnswer">NO</span>
      <input type="radio" value="No" class="radio">
    </div>
  </div>
  <div class="formField" id="ansYes">
    <label class="label">How are you doing?</label>
    <input type="text" class="input">
  </div>
  <input type="submit" value="Submit RSVP" id="submit">
</form>

＆＃13;

Answer 3

为了实现带背景的单选按钮的切换效果，$('.radioTransform', this).toggleClass('active');是不够的。

首先，考虑到它已经附加到$('.radioTransform')的点击处理程序中，当您添加this作为$('.radioTransform', this).toggleClass('active');的第二个参数时，您告诉它要查找{ {1}}在.radioTransform内，因为您将.radioTransform设置为选择器的上下文，这就是为什么它不会改变颜色的原因。即使你删除.radioTransform，你也会为每个this切换一次（我写了.radioTransform多少次？:)）

其次，如果radioTransform处于非活动状态，请从background: red移除，否则您将永远不会看到它{/ p>

＆＃13;

.radioTransform

＆＃13;

var rsvpAns = $('.radioTransform');
rsvpAns.click(function() {
  $('.radio', this).prop('checked', !$('.radio', this).prop('checked')).change();
  var radioCheck = $('.radio', this).val();
  $(this).toggleClass('active');
  $(this).siblings('.radioTransform').toggleClass('active', !$(this).hasClass('active'));
  console.log(radioCheck);
  if (radioCheck == 'Yes') {
    $('#ansYes').fadeToggle(400);
  } else {
    $('#ansYes').fadeOut(400);
  }
});

＆＃13;

.radio {
	display: none;
}
#pushR {
	margin-right: 25px;
}
.radioTransform {
	width: 220px;
	display: inline-block;
	vertical-align: top;
	background: #dbc8ca;
	cursor: pointer;
	padding: 15px 0;
}
.radioTransform {
	/*background: red;*/
}
.radioAnswer {
	font-family: 'Open Sans', sans-serif;
	font-size: .9rem;
	text-align: center;
}
#ansYes {
  display: none;
}

.radioTransform.active {
  background: red;
}

＆＃13;

无线电输入为div

3 个答案: