jQuery如何映射数组与单选按钮值

Question

我试图写一个购物清单功能只是为了好玩，如果用户没有点击任何单选按钮，他们会从服务器获得完整的日志列表，我完成了该部分但我现在卡住不知道如何显示用户单击的单选按钮值的列表映射？ 例如，如果用户点击guava那么日志只会显示有关番石榴消息：

Jan 2 22:00:10 guava for 1 

如果用户点击guava and strawberry，则日志将同时显示番石榴和草莓的消息是这样的：

Jan 1 00:00:10 strawberry for 2 
Jan 2 22:00:10 guava for 1 
Jan 3 03:10:16 strawberry for 22 

我的代码是在这里：

var cart = "|grocery|Jan 1 00:00:10 |shopping| [list]|strawberry| for 2 |grocery|Jan 1 00:20:23 |shopping| [list]|apple| for 4 |grocery|Jan 2 00:10:10 |shopping| [list]|apple| for 5 |grocery|Jan 2 00:20:15 |shopping| [list]|banana| for 3 |grocery|Jan 2 10:00:00 |shopping| [list]|apple| for 10 |grocery|Jan 2 22:00:10 |shopping| [list]|guava| for 1 |grocery|Jan 3 01:09:08 |shopping| [list]|watermelon| for 7 |grocery|Jan 3 03:10:16 |shopping| [list]|strawberry| for 22"; 
 

 
$("#button").click(function(){ 
 
\t var tidyList = cart.split("|grocery|"); 
 
    
 
    for(var i=0; i<tidyList.length; i++){ 
 
    \t var list = tidyList[i].split("|"); 
 
    var tmp = list[0] + "\r&nbsp;&nbsp;" + list[3] + list[4] + "\r<br/>"; 
 
     
 
    if(list.length > 1 && $("input:radio").is(":checked") == false){ 
 
    \t $("#showList").append(tmp); 
 
    } 
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
<th>Fruits for you</th> 
 
<td> 
 
    <ul> 
 
    <li> 
 
     <input type="radio" value="apple" id="apple"> 
 
     <label for="apple">apple</label> 
 
    </li> 
 
    <li> 
 
     <input type="radio" value="banana" id="banana"> 
 
     <label for="apple">banana</label> 
 
    </li> 
 
    <li> 
 
     <input type="radio" value="watermelon" id="watermelon"> 
 
     <label for="apple">watermelon</label> 
 
    </li> 
 
    <li> 
 
     <input type="radio" value="guava" id="guava"> 
 
     <label for="apple">guava</label> 
 
    </li> 
 
    <li> 
 
     <input type="radio" value="strawberry" id="strawberry"> 
 
     <label for="apple">strawberry</label> 
 
    </li> 
 
    </ul> 
 
</td> 
 
</tr> 
 
</table> 
 
<input type="button" value="Shopping List" id="button"> 
 
<div id="showList"></div>

Answer 1

var cart = "|grocery|Jan 1 00:00:10 |shopping| [list]|strawberry| for 2 |grocery|Jan 1 00:20:23 |shopping| [list]|apple| for 4 |grocery|Jan 2 00:10:10 |shopping| [list]|apple| for 5 |grocery|Jan 2 00:20:15 |shopping| [list]|banana| for 3 |grocery|Jan 2 10:00:00 |shopping| [list]|apple| for 10 |grocery|Jan 2 22:00:10 |shopping| [list]|guava| for 1 |grocery|Jan 3 01:09:08 |shopping| [list]|watermelon| for 7 |grocery|Jan 3 03:10:16 |shopping| [list]|strawberry| for 22"; 
 

 
$("#button").click(function(){ 
 
\t var tidyList = cart.split("|grocery|"); 
 
    
 
    for(var i=1; i<tidyList.length; i++){ 
 
    \t var list = tidyList[i].split("|"); 
 
    
 
    var tmp = list[0] + "\r&nbsp;&nbsp;" + list[3] + list[4] + "\r<br/>"; 
 
    if($("input:radio:checked").val()==list[3]){ 
 
    $("#showList").append(tmp); 
 
    } 
 
    
 
    
 
\t } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table> 
 
<tr> 
 
<th>Fruits for you</th> 
 
<td> 
 
    <ul> 
 
    <li> 
 
     <input name="grocery" type="radio" value="apple" id="apple"> 
 
     <label for="apple">apple</label> 
 
    </li> 
 
    <li> 
 
     <input name="grocery" type="radio" value="banana" id="banana"> 
 
     <label for="banana">banana</label> 
 
    </li> 
 
    <li> 
 
     <input name="grocery" type="radio" value="watermelon" id="watermelon"> 
 
     <label for="watermelon">watermelon</label> 
 
    </li> 
 
    <li> 
 
     <input name="grocery" type="radio" value="guava" id="guava"> 
 
     <label for="guava">guava</label> 
 
    </li> 
 
    <li> 
 
     <input name="grocery" type="radio" value="strawberry" id="strawberry"> 
 
     <label for="strawberry">strawberry</label> 
 
    </li> 
 
    </ul> 
 
</td> 
 
</tr> 
 
</table> 
 
<input type="button" value="Shopping List" id="button"> 
 
<div id="showList"></div>