为什么“点击”事件不会触发？

Question

我正在试图弄清楚如何警告在一组单选按钮中选择了哪个按钮。

但是，为什么'click'事件没有触发？

$('.selectedOption').click(function() {
  alert($(this).val());
  alert($('input[name=credit-card]:checked').val());
});

.cc-selector input {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.visa {
  background-image: url(http://i.imgur.com/lXzJ1eB.png);
}

.mastercard {
  background-image: url(http://i.imgur.com/SJbRQF7.png);
}

.cc-selector input:active+.drinkcard-cc {
  opacity: .9;
}

.cc-selector input:checked+.drinkcard-cc {
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
}

.drinkcard-cc {
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 100px;
  height: 70px;
  -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
  -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
  filter: brightness(1.8) grayscale(1) opacity(.7);
}

.drinkcard-cc:hover {
  -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
  -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
  filter: brightness(1.2) grayscale(.5) opacity(.9);
}


/* Extras */

a:visited {
  color: #888
}

a {
  color: #444;
  text-decoration: none;
}

p {
  margin-bottom: .3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <p>Now, with CSS3: </p>
  <input id="visa" type="radio" name="credit-card" value="visa" />
  <label class="drinkcard-cc visa selectedOption" for="visa"></label>

  <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
  <label class="drinkcard-cc mastercard selectedOption" for="mastercard"></label>
</form>
<small><a href="https://github.com/rcotrina94/icons">
    &copy; Icons by @rcotrina94 on Github</a></small>

请参阅我在jsfiddle的代码

jsfiddle code

Answer 1

您可以使用以下代码：

$( "input[type=radio]" ).on("click",
function () {

    alert($(this).val());
    alert($('input[name=credit-card]:checked').val());

});

Answer 2

您将click事件绑定到标签而不是输入，因此单击图像（这是一个标签），您将看到警报，但是单击输入（单选按钮），没有任何反复发生。

我的解决方案：

您可以隐藏输入，然后在选中时突出显示标签。

1. 使用<span>包装每对输入和标签，然后隐藏输入。

2. 使用input:checked + label之类的css选择器为所选卡片呈现特定效果。

＆＃13;
＆＃13;
$('input').change(function(e){
  console.log($('input[name=credit-card]:checked').val())
});
＆＃13;
.cc-selector input {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.visa {
  background-image: url(http://i.imgur.com/lXzJ1eB.png);
}

.mastercard {
  background-image: url(http://i.imgur.com/SJbRQF7.png);
}

.cc-selector input:active+.drinkcard-cc {
  opacity: .9;
}

.cc-selector input:checked+.drinkcard-cc {
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
}

.drinkcard-cc {
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 100px;
  height: 70px;
  -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
  -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
  -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
  filter: brightness(1.8) grayscale(1) opacity(.7);
}

.drinkcard-cc:hover {
  -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
  -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
  filter: brightness(1.2) grayscale(.5) opacity(.9);
}


/* Extras */

a:visited {
  color: #888
}

a {
  color: #444;
  text-decoration: none;
}

p {
  margin-bottom: .3em;
}

input:checked + label {
  -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
  -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
  filter: brightness(1.2) grayscale(.5) opacity(.9);
  border: 2px solid red;
  border-radius: 5px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>hide inputs(radio buttons)</h3>
<form>
  <p>Now, with CSS3: </p>
  <span>
  <input id="visa" type="radio" name="credit-card" value="visa" style="display:none"/>
  <label class="drinkcard-cc visa" for="visa"></label>
  </span>
  <span class="selectedOption">
  <input id="mastercard" type="radio" name="credit-card" value="mastercard" style="display:none" />
  <label class="drinkcard-cc mastercard" for="mastercard"></label>
  </span>
</form>
<small><a href="https://github.com/rcotrina94/icons">
    &copy; Icons by @rcotrina94 on Github</a></small>
＆＃13;
＆＃13;
＆＃13;