Issue with obtaining the value of the checked radio button in a group?
Please take a look at my test page, my issue is to do with finding the value of the selected radio button in the "Select picture" group.
On loading I have used the following code:
var currentImageFile = $("input:radio[name=selectedImage]:checked").val();
which picks up the default image for the "Selected picture" div on the left. So far so good.
Now the problem is when a "Select picture" radio button is subsequently clicked my event code:
$("input:radio[name=selectedImage]").click(function() {
currentImageFile = $(this).val();
alert($(this).val());
});
(the alert is for testing only) returns no value at all!
The HTML is pretty straight forward:
开发者_C百科<li><div class="xmasImage rounded" rel="http://www.completeinsight.co/resources/xmasHR/56269.jpg">
<img class="rounded" src="http://www.completeinsight.co/resources/xmasLR/56269_p.jpg" width="65" height="65" border="0" alt="56269" />
<div class="imageSelect"><input type="radio" name="selectedImage" value="56269">
<label for="selectedImage">56269</label>
</div>
</div></li>
I am missing the obvious??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var currentImageFile = '';
$('#ImageSelection').find("input:radio[name=selectedImage]").click(function () {
currentImageFile = $(this).val();
alert($(this).val());
});
});
</script>
</head>
<body>
<ul id="ImageSelection">
<li>
<div class="xmasImage rounded" rel="http://www.completeinsight.co/resources/xmasHR/56269.jpg">
<img class="rounded" src="http://www.completeinsight.co/resources/xmasLR/56269_p.jpg"
width="65" height="65" border="0" alt="56269" />
<div class="imageSelect">
<input type="radio" name="selectedImage" value="56269">
<label for="selectedImage">56269</label>
</div>
</div>
</li>
<li>
<div class="xmasImage rounded" rel="http://www.completeinsight.co/resources/xmasHR/56270.jpg">
<img class="rounded" src="http://www.completeinsight.co/resources/xmasLR/56270_p.jpg"
width="65" height="65" border="0" alt="56270" />
<div class="imageSelect">
<input type="radio" name="selectedImage" value="56270">
<label for="selectedImage">56270</label>
</div>
</div>
</li>
</ul>
</body>
</html>
加载中,请稍侯......
精彩评论