下面是一个例子: http://jsfiddle.net/c8uywnpa/21/其在其他浏览器但IE(10)的工作原理。 当该buttonset是一种“形式”元素中包裹的问题来了。 请参阅包含的例子。
<b> Form - Click on image does not work, must click on number </b>
<form>
<div id="myRadio">
<input id="rf1" type="radio" name="myRadio" value="1" />
<label for="rf1">1 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
<input id="rf2" type="radio" name="myRadio" value="2" />
<label for="rf2">2 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
</div>
</form>
<hr>
<h3> No Form - Click on image works </h3>
<div id="myRadioNoForm">
<input id="r1" type="radio" name="myRadioNoForm" value="1" />
<label for="r1">1 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
<input id="r2" type="radio" name="myRadioNoForm" value="2" />
<label for="r2">2 <img src="//jsfiddle.net/img/initializing.png" width="50"/> </label>
</div>
$("#myRadio").buttonset().on('change', function(event) {
alert($(this).find(":checked").val());
});
$("#myRadioNoForm").buttonset().on('change', function(event) {
alert($(this).find(":checked").val());
});
点击标签中的数字触发更改事件,但不如果你点击的标签图像。 任何帮助深表感谢。