Radio button not checked the second time

Question

I have a set of questions is survey based application each page have one question with answer and previous,next button. When i checked the first time it was working fine. If user modify the answer when they click prev or next button clicked previous value not checked in the radio button.

my code is below

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')
});

how to achieve that?

"value not checked in the radio button" , you missed some words ? I don't understand — w3spi, Sep 07 '15 at 14:20
@Zl3n I'm trying to check the value what user previously selected by clicking the previous button. — Ben10, Sep 07 '15 at 14:24
@Ben10 If your code in one-page, you should retrieve the checked checkboxes ... — w3spi, Sep 07 '15 at 14:29
@Zl3n yes, My code in one page. Here what I do. can you post code snippets — Ben10, Sep 07 '15 at 14:31
it seems your html view is dynamic because in your posted code we didn't see any checkbox — Ankit Chaudhary, Sep 07 '15 at 14:42

score 0 · Answer 1 · edited May 23 '17 at 12:14

0

You should not use attr() to (un)check a checkbox.

Please use prop() instead.

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

Further information about how to use prop() with checkboxes are already on stackoverflow.com.

edited May 23 '17 at 12:14

Community

1
1

answered Sep 07 '15 at 16:13

tjati

5,761
4
41
56

Radio button not checked the second time

1 Answers1