單選按鈕沒有被第二次檢查

Question

我有一組問題是基於調查的應用程序每一頁都有一個問題與答案和上一個，下一個按鈕。 當我第一次檢查它工作正常。如果用戶單擊prev或下一個按鈕時修改答案，則單擊之前未在單選按鈕中選中的值。

我的代碼如下

HTML

<div id="survey-screen" data-role="page"> 
    <div class="header-bgcolor" data-role="header"> 
     <div id="wrapper"> 
     <div class="jumbotron"> 
      <h1> 
       <a href="#"> 
       <img src="images/teleperformance-logo.png" class="img-responsive" width="536" height="109"> 
       </a> 
      </h1> 
     </div> 
     </div> 
    </div> 
    <div class="innerContainer" data-role="main"> 
     <div id="wrapper"> 
     <div class="login select-location"> 
      <div class="divs"> 
      </div> 
      <div class="form-group center-button"> 
       <a class="btn btn-lg btn-primary btn-block" id="next">Next</a> 
      </div> 
      <div class="form-group center-button"> 
       <a class="btn btn-lg btn-primary btn-block" id="prev">Prev</a> 
      </div> 
      <div class="form-group center-button"> 
       <a class="btn btn-lg btn-primary btn-block" id="sub">submit</a> 
      </div> 
      <!--<a id="next" style="background-color:#fff;color:#000;padding:3px;">next</a> 
       <a id="prev" style="background-color:#fff;color:#000;padding:3px;">prev</a>--> 
     </div> 
     </div> 
    </div> 
</div> 

jQuery的

$("#next").on('click', function(){ 

    $('#prev').show(); 
    // alert($('.divs').html()); 
    var id = $(".divs div:visible").attr("id"); 
    var last_id = $('.divs').children().last().attr('id'); 
    var nxt_id = +id + +1; 
    var id1 = "#" + id + " input[type='radio']:checked"; 
    alert($("#"+nxt_id+" input[type='radio']").is(':checked') + "Next Value"); 
    var value = $(id1).val(); 

    //alert(value); 
    if(value == null || value == '' || value ==undefined) { 
     value = 'no answer'; 
    } 
    //alert(value + "second"); 
    var myObj = {}; 
    myObj["question"] = $('#label-'+id).text(); 
    myObj["value"] = value; 
    myObj["notes"] = $('#textarea-' + id).val(); 

    var result = {value:value,notes:value}; 
    map[id] = myObj 
    for (var i in map) { 
     //alert(i); 
     //alert(map[i]); 
    } 
    if(nxt_id == last_id) { 
     $('#next').hide(); 
    } 

    if ($(".divs > div:visible").next().length != 0) 

     $(".divs > div:visible").next().show().prev().hide(); 
    else { 
     $(".divs > div:visible").hide(); 

     $(".divs > div:first").show(); 

    } 

    $('.divs div.ui-radio').css("display","block"); 

    $('.divs div.select-checkbox').css("display","block"); 

    $('.divs div.select-textarea').css("display","block"); 

    return false; 

}); 


$("#prev").on('click', function(){ 
    $('#next').show(); 
    //alert($('.divs').html()); 
    var id = $(".divs div:visible").attr("id"); 
    var value = $("#"+id+" input[type='radio']:checked").val(); 

    var first_id = $('.divs').children().first().attr('id'); 
    var pre_id = id-1; 
    alert($("#"+pre_id+" input[type='radio']").is(':checked')); 
    if(value == null || value == '' || value ==undefined) { 
     value = 'no answer'; 
    } 

    var myObj = {}; 
    myObj["question"] = $('#label-'+id).text(); 
    myObj["value"] = value; 
    myObj["notes"] = $('#textarea-' + id).val(); 
    map[id] = myObj; 

    var preValue = map[pre_id].value; 
    alert(preValue + " = " + pre_id); 

    //$("input[id=radio-" + pre_id + "][value='" + preValue + "']").attr("checked",true).checkboxradio("refresh"); 
    //for (var i in map) { 
     // alert(i); 
     //alert(map[i]); 
    //} 
    if(pre_id == first_id) { 
     $('#prev').hide(); 
    } 
    if ($(".divs > div:visible").prev().length != 0) { 
     $(".divs > div:visible").prev().show().next().hide(); 
    } else { 
     $(".divs > div:visible").hide(); 
     $(".divs > div:last").show(); 
    } 
    var chk_id = "#"+pre_id+" input:radio[value=" + preValue + "]:first"; 
    alert(chk_id); 
    $(chk_id).attr("checked", "checked"); 
    $("input[type='radio']").checkboxradio("refresh"); 
    $('.divs div.ui-radio').css("display","block"); 
    $('.divs div.select-textarea').css("display","block"); 
    $('.divs div.select-checkbox').css("display","block"); 
    return false; 
}); 

$(".checkbox").on('click',function(){ 
$(this).toggleClass('checked') 
}); 

如何實現這一目標？

Answer 1

您不應該使用attr()來（取消）選中複選框。

請改用prop()。

$(chk_id).prop("checked", true); 

有關how to use prop() with checkboxes的更多信息已經在stackoverflow.com上。