想要根据选择以 div 顺序显示复选框的选中选项

Question

我想按照选择的顺序在 div 中显示选中的选项

1.  What is the biggest skin concern in India in your practice?
 Number in order of    priority 
 [] Acne                        
 [] Dark circles under eyes             
 [] Dry skin             div is here and it will show list as per selection order
 [] Oily skin                       
 [] Skin color                      
 [] Skin tone evenness              
 [] Wrinkles                        

如果有人选择深色皮肤然后痤疮，我的 div 应该首先列出深色皮肤，然后应该出现痤疮

input type="checkbox" name="skin_concern[]" id="a2" title="sc" value="Dark    circles under eyes" class="validate[required] radio"

请提供解决方案，我将如何根据 jquery 中的选择顺序显示此选定选项。

提前致谢

Answer 1

试试这段代码，如果这不符合您的要求，请告诉我...

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style type="text/css">
    .show_div{
        float: left;
        width: 200px;
        height: 200px;
        background: lightyellow;
        border: 1px solid #ccc;
    }
</style>

<input type="checkbox" class="haircls" name="skin_concern[]" value="Acne" />&nbsp;Acne<br />
<input type="checkbox" class="haircls" name="skin_concern[]" value="Dark circles under eyes" />&nbsp;Dark circles under eyes<br />
<input type="checkbox" class="haircls" name="skin_concern[]" value="Dry skin" />&nbsp;Dry skin<br />
<input type="checkbox" class="haircls" name="skin_concern[]" value="Oily skin" />&nbsp;Oily skin<br />
<input type="checkbox" class="haircls" name="skin_concern[]" value="Skin color" />&nbsp;Skin color<br />
<input type="checkbox" class="haircls" name="skin_concern[]" value="Skin tone evenness" />&nbsp;Skin tone evenness<br />


<script type="text/javascript">
$('.haircls').change(function(){
  if($(this).is(':checked')){
    document.getElementById('show_div_ID').innerHTML += '<span style="float:left;width:100%;">'+ this.value +'</span>';
  } else {
    $("#show_div_ID span:contains('"+this.value+"')").remove();
  }
});
</script>


<div class="show_div" id="show_div_ID"></div>