Question

我有一组问题是基于调查的应用程序每个页面都有一个问题与答案和前一个，下一个按钮。当我第一次检查它工作正常。如果用户在单击“上一个”或下一个按钮时修改了答案，则单击单选按钮中未选中的上一个值。

我的代码在

之下

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上。

第二次未选中单选按钮

1 个答案: