如何在关闭slideToggle时重置选中的单选按钮



我有一个简单的slideToggle设置,可以在页面上打开一个div。有些潜水器会进行自我测试。我有麻烦弄清楚如何重置单选按钮时,div关闭。下面是jQuery:

$("h2.titleTrigger").click(function(e){
e.preventDefault();
//TOGGLE OPEN/CLOSE THE DIV
$(this).toggleClass("active").next().slideToggle("fast");
return false;
});

//self test
$('input:radio').bind('change',function(e){
e.preventDefault();
var parentId = $(this).parents('.selfTest').attr('id');
$('#'+parentId+' .selfTestWrong').addClass('answerShown');
$('#'+parentId+' .selfTestAnswer').slideDown(300);
});

看到它在这里工作:http://jsfiddle.net/3XBgu/

当用户关闭slideToggle时,将自检重置为未选择状态的最佳方法是什么?

你可以这样做:

$("h2.titleTrigger").click(function (e) {
    e.preventDefault();
    //TOGGLE OPEN/CLOSE THE DIV
    $(this).toggleClass("active").next().slideToggle("fast");
    // Re-set all the radio buttons
    $('input:radio').prop('checked', false);
    // Re-set all the labels class
    $('.selfTestWrong').removeClass('answerShown');
    return false;
});

小提琴

这就解决了你的问题:

//TOGGLE OPEN/CLOSE THE DIV
    $(this).toggleClass("active").next().slideToggle("fast");
    $(".hey").each(function(){
        this.checked = false; 
        $('.selfTestWrong').removeClass('answerShown');
        $('.selfTestAnswer').hide();
    });
return false;
});

(添加class="hey"到每个输入项)

http://jsfiddle.net/3XBgu/2/

最新更新