外部ボタンによるラジオ入力コントロール

Question

こんにちは私はラジオ入力からスライドショーを作成しており、スライドを移動させるための「前」ボタンと「次へ」ボタンを設計しました。しかし、ボタンを押して次の入力も確認したいと思います。現在、スライドは移動しますが、次の入力はチェックされません。私はここでこの解決策を見てきました： Select next/prev radio button with external button それを実装しようとしましたが、動作させることができません。ここに私のコードは次のとおりです。

<form action="" method="post"> 
    <ul class="form-ul" style="position: relative; width: 176px; height: 107px;">        
     <li style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 1; width: 82px; height: 43px;"> 
     <label> 
      <input type="radio" name="term_id" value="59" checked="checked"> 
     </label> 
     </li> 
     <li style="position: absolute; top: 0px; left: 0px; display: none; z-index: 4; opacity: 0; width: 82px; height: 62px;"> 
     <label> 
      <input type="radio" name="term_id" value="61"> 
     </label> 
     </li> 
    </ul> 
    <div id="prev" style="float:left;">PREV</div> 
    <div id="next" style="float:right;">NEXT</div> 
</form> 

はJavaScript：

$(document).ready(function(){ 
    $('#prev').click(function(){ 
    $('.form-ul').find('li:has(input:checked)').prev().children('input').prop("checked", true); 
    }); 

    $('#next').click(function(){ 
    $('.form-ul').find('li:has(input:checked)').next().children('input').prop("checked", true); 
    }); 
}); 

Answer 1

jQueryの.children()は唯一の要素の直接の子を見つけました。あなたのケースでは、ラジオボタンは、直接の子ではありませんので、あなたは.find()にそれを変更する必要があります。

$(document).ready(function(){ 
    $('#prev').click(function(){ 
     $('.form-ul').find('li:has(input:checked)').prev().find('input').prop("checked", true); 
    }); 

    $('#next').click(function(){ 
     $('.form-ul').find('li:has(input:checked)').next().find('input').prop("checked", true); 
    }); 
}); 

また、あなたはあまりのクエリを行うことで、パフォーマンスを向上させることができます。代わりに、それは円形にするために

$('.form-ul).find('li:has(input:checked)') 

使用

$('.form-ul li:has(input:checked)') 

の、結果セットのlengthに対してチェック：ここ

$('#next').click(function(){ 
    var $next = $('.form-ul li:has(input:checked)').next(); 
    if(!$next.length) $next = $('.form-ul li').first(); 
    $next.find('input').prop("checked", true); 
}); 

はfiddleとcircular fiddle