使用外部按钮选择下一个/上一个单选按钮

2022-01-21 00:00:00 radio-button jquery html

我正在制作一种幻灯片形式，当用户单击下一张图片时，还必须选择单选按钮.我得到了滑动工作，下一个按钮"也在工作，但我有点卡在上一个"按钮上.不明白为什么它不起作用.

(小提琴)

这是我目前得到的，HTML:

<div class="button prev">&#60;</div><ul><li><div class="button prev">&#60;</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">&#60;</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">&#62;</div>
</div>
<div>
    <div class="button prev">&#60;</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">&#62;</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

相关文章