ОТ radio бутон към jquery ефект

[Hous]

Имам три radio buttons със картинки до тях,и се чудя дали не може да си остане функционалността , а в същото време самите кръгчета да се скрият,а при кликане на картинката да се сменя фона (зад нея) за да разбереш ,че е избраха,и реално да си работи ест...
Мисля,че си представяте ефекта...
ето и кода:

return '<input type="radio" value="1" checked="checked" name="znak" /><img src="kartinka1.jpg" />';

return '<input type="radio" name="znak" value="2" /><img src="kartinka2.jpg" />';

return '<input type="radio" name="znak" value="3" /><img src="kartinka3.jpg" />';

ps:Нещо такова:

$('#divID').click(function()
{
  $('#divID').css("background", "#ddd");  
});

но в същото време да си работи и radio бутона/ите (като самите те са скрити,а картинките се виждат)

 

[exec]

Въпроса ти е по-скоро за другия форум - HTML/Javascript

<div id="buttons">
    <input type="radio" name="znak" value="a" />
    <input type="radio" name="znak" value="b" />
    <input type="radio" name="znak" value="c" />
</div>

<ul id="images">
   <li><img src="/images/somefile.jpg" width="100" /></li>
   <li><img src="/images/otherfile.jpg" width="100" /></li>
   <li><img src="/images/thirdfile.jpg" width="100" /></li>
</ul>

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
    $('#images img').click(function(){
	//намираме индекса на картинката, върху която е кликнато
        var index = $('#images img').index(this);

	//маркираме радио бутона на същия индекс като избран
	$("input[name=znak]").eq(index).attr("checked", true);

	//премахваме selected класа от всички контейнери на картинките (за да не го търсим къде точно е бил)
	$('#images li').removeClass("selected");

	//добавяме selected класа към контейнера на избраната картинка
	$(this).parent().addClass("selected");

    });
});
</script>

<style>
#images li {list-style-type: none; padding: 10px; margin: 10px; display: inline-block;}
#images li.selected {background: #aaa;}
</style>

Радио бутоните би могъл да ги изнесеш извън екрана с

[css]
#buttons {
position: absolute;
left: -9999px;
}
[/css]


Това също може да ти е интересно:
http://jqueryui.com/button/#radio

 

[Hous]

Всъщност с това проработи:

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<input type="radio" value="1" style="display:;" name="znak" id="b1"/>
<img src="Screen_05.jpg" id="p1"/>




<script>
$("#p1").click(function() {
	$("#b1").prop("checked", true); 
	});
</script>

 

[Hous]

Така и така темата не е приключена,някой може ли да ми опрости кода:

	$("#p1").click(function() {
		$("#b1").prop("checked", true);
		$("#p2").css({backgroundColor: \'transparent\'});
		$("#p3").css({backgroundColor: \'transparent\'});
		$("#p1").css({backgroundColor: \'red\'});
	});
	$("#p2").click(function() {
		$("#b2").prop("checked", true);
		$("#p1").css({backgroundColor: \'transparent\'});
		$("#p3").css({backgroundColor: \'transparent\'});
		$("#p2").css({backgroundColor: \'red\'});
	});
	$("#p3").click(function() {
		$("#b3").prop("checked", true);
		$("#p1").css({backgroundColor: \'transparent\'});
		$("#p2").css({backgroundColor: \'transparent\'});
		$("#p3").css({backgroundColor: \'red\'});
	});

защото мисля,че може и по-кратко,просто нямам толкова опит с jquery-то.
Идеята е като се кликне на картинката (p1 или p2 или p3),да се селектира бутона (b1/b2/b3) и да се сменя фона в червено,в същото време ако кликнеш на другата картинка ,предната и 3-тата да се сменя фона на прозрачно,тоест да показва къде точно си избрал в момента,след като radio бутоните са скрити...

 

[exec]

[js]
$(function(){
$("#p1, #p2, #p3").click(function() {
//взимаме номерчето
var d = $(this).attr('id').match(/\d+/);

//маркираме съответния радиобутон като избран
$("#b"+d).prop("checked", true);

//махаме фоновия цвят от всички картинки
$("#p1, #p2, #p3").css({backgroundColor: 'transparent'});

//слагаме фонов цвят на картинката върху която е кликнато
$(this).css({backgroundColor: 'red'});
});
});
[/js]

Ако на картинките сложиш един и същ клас, селектора ще бъде по-лесен и кратък, няма да има нужда да изброяваш всички елементи. Същото важи и за радио бутоните:

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

<script>
$(function(){
  $(".triggerImage").click(function() {
      //взимаме индекса
      var index = $('.triggerImage').index(this);

      //маркираме съответния радиобутон като избран
      $(".relatedRadio").eq(index).prop("checked", true);

      //махаме фоновия цвят от всички картинки
      $(".triggerImage").css({backgroundColor: 'transparent'});

      //слагаме фонов цвят на картинката върху която е кликнато
      $(this).css({backgroundColor: 'red'});
   });
});
</script>

<input type="radio" name="znak" id="b1" class="relatedRadio" value="1" />
<input type="radio" name="znak" id="b2" class="relatedRadio" value="2" />
<input type="radio" name="znak" id="b3" class="relatedRadio" value="3" />

<img width="50" height=50 id="p1" class="triggerImage" />
<img width="50" height=50 id="p2" class="triggerImage" />
<img width="50" height=50 id="p3" class="triggerImage" />