razvai razvai - 1 year ago 57
jQuery Question

how can i change the radio button via next prev

I have my slick slider and want to know how can i change the radio buttons via next and prev buttons, i'm not good at js or jquery, if you can help me i would be more than happy :(

<section class="center slider">
<div class="type">
<label><input type="radio" name="type" value="1" checked /><img src="./images/1.png"></label>
</div>
<div class="type">
<label><input type="radio" name="type" value="2" /><img src="./images/2.png"></label>
</div>
<div class="type">
<label><input type="radio" name="type" value="3" /><img src="./images/3.png"></label>
</div>
<div class="type">
<label><input type="radio" name="type" value="4" /><img src="./images/4.png"></label>
</div>
<div class="type">
<label><input type="radio" name="type" value="5" /><img src="./images/5.png"></label>
</div>
<div class="type">
<label> <input type="radio" name="type" value="6"/><img src="./images/6.png"></label>
</div>
<div class="type">
<label><input type="radio" name="type" value="7" /><img src="./images/7.png"></label>
</div>
</section>

<button type="button" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>

<button type="button" data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>


i tried to use some js:

<button type="button" onclick="dayNavigation('prev');"data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>

<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>

dayNavigation = function (direction) {
var all = $('.slider input:radio');
var current = $('.slider input:radio:checked');
var index;
if (direction == 'slick-prev') {
index = all.index(current) - 1;
} else {
index = all.index(current) + 1;
}

if(index >= all.size()) index = 0;
all.eq(index).click();
return false;
};

Answer Source

You can use the eq() function from JQuery combined with the .prop() function to achieve this.

Here's the working fiddle : http://jsfiddle.net/jPfXS/111/

<button type="button" onclick="dayNavigation('prev');"data-role="none" class="slick-next" aria-label="Next" tabindex="0" role="button">Next</button>

<button type="button" onclick="dayNavigation('next');" data-role="none" class="slick-prev" aria-label="Previous" tabindex="0" role="button">Previous</button>

var index = 0;
dayNavigation = function (direction) {
    var curr = $('.slider input[name="type"]:checked');
    console.log(curr);
    if(direction == 'next'){
        if(index > 0){
            $('input[name="type"]').eq(index-1).prop("checked", true);
            curr.prop("checked", false);
            index--;
        }
    }
    else{
        if(index < $('input[name="type"]').length - 1){
            $('input[name="type"]').eq(index+1).prop("checked", true);
            curr.prop("checked", false);
            index++;
        }
    }
};
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download