<div class="button prev"><</div><ul><li>
jQuery:
$(document).ready(function(){$('.prev').click(function(){$(this).next().find('input:checked').parent().prev().children('input').attr("checked", true);$(this).next().find('input:checked').last().removeAttr("checked");});$('.next').click(function(){$(this).prev().find('input:checked').parent().next().children('input').attr("checked", true);$(this).prev().find('input:checked').eq(0).parent().prev().children('input').removeAttr("checked");});});
解决方案
可以简化为
$(document).ready(function(){$('.prev').click(function(){$(this).parent().find('input:checked').parent().prev().children('input').prop("checked", true);});$('.next').click(function(){$(this).parent().find('input:checked').parent().next().children('input').prop("checked", true);});});
演示:小提琴
<小时>
同样使用 :has-selector
$(document).ready(function(){$('.prev').click(function(){$(this).parent().find('li:has(input:checked)').prev().children('input').prop("checked", true);});$('.next').click(function(){$(this).parent().find('li:has(input:checked)').next().children('input').prop("checked", true);});});
演示:小提琴
I'm making a sort of slideshow form, and when user click's the next image slides in, but also the radio button must be selected. I got the sliding working, and the 'next button' is working as well, but I'm kinda stuck with the 'prev' button. Don't see why it doesn't work.
(fiddle)
This is what I got so far, HTML:
<form>
<div>
<div class="button prev"><</div>
<ul>
<li>
<input type="radio" id="choise_1" name="first_choise" checked="checked"/>
<label for="choise_1">One</label>
</li>
<li>
<input type="radio" id="choise_2" name="first_choise"/>
<label for="choise_2">Two</label>
</li>
<li>
<input type="radio" id="choise_3" name="first_choise"/>
<label for="choise_3">Three</label>
</li>
</ul>
<div class="button next">></div>
</div>
<div>
<div class="button prev"><</div>
<ul>
<li>
<input type="radio" id="choise_1" name="second_choise" checked="checked"/>
<label for="choise_1">One</label>
</li>
<li>
<input type="radio" id="choise_2" name="second_choise"/>
<label for="choise_2">Two</label>
</li>
<li>
<input type="radio" id="choise_3" name="second_choise"/>
<label for="choise_3">Three</label>
</li>
</ul>
<div class="button next">></div>
</div></form>
jQuery:
$(document).ready(function(){
$('.prev').click(function(){
$(this).next().find('input:checked').parent().prev().children('input').attr("checked", true);
$(this).next().find('input:checked').last().removeAttr("checked");
});
$('.next').click(function(){
$(this).prev().find('input:checked').parent().next().children('input').attr("checked", true);
$(this).prev().find('input:checked').eq(0).parent().prev().children('input').removeAttr("checked");
});});
解决方案
It can be simplified to
$(document).ready(function(){
$('.prev').click(function(){
$(this).parent().find('input:checked').parent().prev().children('input').prop("checked", true);
});
$('.next').click(function(){
$(this).parent().find('input:checked').parent().next().children('input').prop("checked", true);
});
});
Demo: Fiddle
Same using :has-selector
$(document).ready(function(){
$('.prev').click(function(){
$(this).parent().find('li:has(input:checked)').prev().children('input').prop("checked", true);
});
$('.next').click(function(){
$(this).parent().find('li:has(input:checked)').next().children('input').prop("checked", true);
});
});
Demo: Fiddle
这篇关于使用外部按钮选择下一个/上一个单选按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!