0
在單擊標籤文本(男性/女性)時,IE邊緣單選按鈕會被選中/取消選中,但不會在單擊與男性/女性相鄰的圖像時出現。當在其他瀏覽器單選按鈕時點擊圖像以及文本(男性/女性)時,選中/取消選中。單選按鈕由於圖像在Internet Explorer邊緣無法正常工作
HTML:
<div class="form-group clearfix">
<div class="pull-left formQuestions"><p>Which gender do you identify with?</p></div>
<div class="pull-left individualAnswer">
<div class="clearfix">
<div class="pull-left optionOne">
<input type="radio" name="gender" id="male" class="input-hidden" ng-model="genderSelect" ng-value = "'male'" ng-change = "genderSelection(genderSelect)" required/>
<label for="male" class="radioLabel">
<img class="radioPic" ng-src={{imgPathMale}} /> Male
</label>
</div>
<div class="pull-left">
<input type="radio" name="gender" id="female" class="input-hidden" ng-model="genderSelect" ng-value = "'female'" ng-change = "genderSelection(genderSelect)" required/>
<label for="female" class="radioLabel"> <img class="radioPic" ng-src={{imgPathFemale}} />Female
</label>
</div>
</div>
</div>
</div>
CSS:
.input-hidden{
visibility: hidden;
position: absolute;
}
JS:
$scope.genderSelection = function(gender){
if(gender == 'male'){
$scope.imgPathMale = "assets/images/form_radio_selected.png";
$scope.imgPathFemale = "assets/images/form_radio_unselected.png";
}
else{
$scope.imgPathFemale = "assets/images/form_radio_selected.png";
$scope.imgPathMale = "assets/images/form_radio_unselected.png";
}
}