私はリサーチをシリアライズとして表示したい

アンケートを作成します。この調査には15の質問があります。各質問には4つの答えがチェックボックスに表示されます。クエストは最大2つのチェックボックスを選択することができ、どの選択肢が最初（重要）で、どの選択肢が2番目（通常重要）であるかを知る必要があります。私はリサーチをシリアライズとして表示したい

私はjsfiddleで作成しました。私はどのように私はそれを行うことができます。チェックボックスは、「これは最初の選択である」や「これは、各選択ボックスの右側にある第二の選択で確認されたときに表示したい？あなたが使用することができます

var limit = 2; 
 
$('input.single-checkbox').on('change', function(evt) { 
 
    if ($(this).siblings(':checked').length >= limit) { 
 
    this.checked = false; 
 
    } 
 
}); 
 

 
var seq = 0, 
 
    $wrapper = $("#wrapper"), 
 
    $ch = $('input[type="checkbox"]', $wrapper); 
 
$wrapper.on('click', 'input[type="checkbox"]', function() { 
 
    if (this.checked) { 
 
    $ch = $ch.not(this); //remove from jQuery array 
 
    Array.prototype.push.call($ch, this); //add to front of jQuery array 
 
    } 
 
}); 
 

 
$("input[type=button]", $wrapper).on('click', function() { 
 
    var str = $ch.filter(":checked").map(function(i, el) { 
 
    return el.value; 
 
    }).get().join("\n-\n"); 
 
    $("#result").text(str).show(); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 

 
    <div id="question"> 
 
    <h2>How are you today?</h2> 
 
    </div> 
 
    <div id="wrapper"> 
 
    <input class="single-checkbox" id="perfect" name="perfect" type="checkbox" value="perfect" />Perfect 
 
    <br /> 
 
    <input class="single-checkbox" id="good" name="good" type="checkbox" value="good" />Good 
 
    <br /> 
 
    <input class="single-checkbox" id="notbad" name="notbad" type="checkbox" value="notbad" />Not Bad 
 
    <br /> 
 
    <input class="single-checkbox" id="worst" name="worst" type="checkbox" value="worst" />Worst 
 
    <br/> 
 
    <br/> 
 
    <input type="button" value="Serialize" /> 
 
    <input type="button" value="Next Question" /> 
 
    </div> 
 
    <div id=""></div> 
 

 
</body> 
 

 
</html>

出典

2016-07-26 Onder Yilmaz

data-order属性は、ユーザーがチェックボックスをチェックした順序を保存するには、次の例を確認してください（つまり、ユーザーが最大2つのチェックボックスをチェックすることができます注意してください）：。

UPDATE

はそれぞれの右側の順序指示が入力

$(document).on('change', '[type="checkbox"]', function() { 
 
    var that = $(this); 
 
    var par = that.closest('ul'); 
 
    var checked = par.find('[type="checkbox"]').filter(':checked').length; 
 

 
    if (that.is(':checked')) { 
 
    // Add a 'data-order' attribute if the input is checked 
 
    that.attr('data-order', checked).after($('<span class="order-span">Choice #' + checked + '</span>')); 
 
    } else { 
 
    // Remove 'data-order' if input is unchecked 
 
    that.removeAttr('data-order').next('.order-span').remove(); 
 
    } 
 

 
    // Disable the rest inputs if there are 2 checked inputs 
 
    if (checked == 2) { 
 
    par.find('[type="checkbox"]').not(':checked').prop('disabled','disabled'); 
 
    } else { 
 
    par.find('[type="checkbox"]').removeAttr('disabled'); 
 
    } 
 
}); 
 

 
$(document).on('click', '#serialize', function() { 
 
    // Create an array that will hold the data 
 
    var res = []; 
 

 
    // Iterate over all the unordered lists that contain the checkboxes 
 
    $('ul').each(function() { 
 
    // Create an array that will hold the data of this ul 
 
    var ulArr = []; 
 
    var thisUl = $(this); 
 

 
    // Iterate over the specific ul's list items 
 
    thisUl.find('[type="checkbox"]').filter(':checked').each(function() { 
 
     var inp = $(this); 
 
     // Create an object for this input and push it to the appropriate array 
 
     ulArr.push({ 
 
     id: inp.attr('id'), 
 
     order: inp.attr('data-order') 
 
     }); 
 
    }); 
 

 
    // Create an object for this ul and push it to the parent array 
 
    res.push({ 
 
     ul: thisUl.attr('id'), 
 
     inputs: ulArr 
 
    }); 
 

 
    }); 
 

 
    // Serialize the object and alert 
 
    var serializedObj = JSON.stringify(res); 
 
    alert(serializedObj); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<ul id="ul_1"> 
 
    <li><input id="1" type="checkbox" /></li> 
 
    <li><input id="2" type="checkbox" /></li> 
 
    <li><input id="3" type="checkbox" /></li> 
 
    <li><input id="4" type="checkbox" /></li> 
 
</ul> 
 

 
<ul id="ul_2"> 
 
    <li><input id="5" type="checkbox" /></li> 
 
    <li><input id="6" type="checkbox" /></li> 
 
    <li><input id="7" type="checkbox" /></li> 
 
    <li><input id="8" type="checkbox" /></li> 
 
</ul> 
 
<button id="serialize">Serialize</button>

出典

2016-07-26 08:01:32 kapantzak

ワウチェックを追加しました。それは私にとっては簡単ではありませんが、完璧です。どうもありがとうございました。しかし、私はまたチェックボックスのチェックの前後に答えを見たい。私は、ページが開いているとき、私は質問と回答を表示したい、ユーザーがチェックボックスを選択すると、選択した回答の右側に「選択肢#x」が表示されます。出来ますか？ –

私はリサーチをシリアライズとして表示したい

答えて

関連する問題