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

Question

我正在尝试编写一个购物清单功能，只是为了好玩，如果用户没有点击任何单选按钮，他们将从服务器获得一个完整的日志列表，我完成了那部分，但我现在卡住了'知道如何用用户点击的单选按钮值显示列表映射吗？ 例如，如果用户单击guava，则日志将仅显示有关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(){
	var tidyList = cart.split("|grocery|");
  
  for(var i=0; i<tidyList.length; i++){
  	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){
    	$("#showList").append(tmp);
    }
	}
});

<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

＆＃13;

＆＃13;

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(){
	var tidyList = cart.split("|grocery|");
    
  for(var i=1; i<tidyList.length; i++){
  	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);
   }
    
   
	}
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;