用户投稿所有的HTML元件的使用方式，大多可以由w3school习得 ;
但是，w3school没告诉我们的是为什么要用这个元件？
或者什么时候用这个元件？更或者怎样使用这个元件使用者才会觉得好操作？
因此，小弟本月来分享一下这5年来，前端 User Friendly 的一些开发心得！
也期待板上的高手大大能产生共鸣，分享一些 User Friendly 的开发心得！
(毕竟，工作上一定会遇到奥客完美魔人
)
就先从checkbox开始吧！
假设有一份简单的金拱门订餐页面，源码如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title></head><body><script src="https://code.jquery.com/jquery-3.1.0.js"></script> <p><center>欢迎光临金拱门,请勾选您要的餐点点餐：</center></p> <input type="checkbox" id="menu1" name="menu1" value="1">超值全餐1号餐 <input type="checkbox" id="menu2" name="menu2" value="2">超值全餐2号餐 <input type="checkbox" id="menu3" name="menu3" value="3">超值全餐3号餐 <input type="checkbox" id="menu4" name="menu4" value="4">超值全餐4号餐 <input type="checkbox" id="menu5" name="menu5" value="5">超值全餐5号餐 <p></p> <input type="checkbox" id="menu6" name="menu6" value="6">超值全餐6号餐 <input type="checkbox" id="menu7" name="menu7" value="7">超值全餐7号餐 <input type="checkbox" id="menu8" name="menu8" value="8">超值全餐8号餐 <input type="checkbox" id="menu9" name="menu9" value="9">超值全餐9号餐 <input type="checkbox" id="menu10" name="men105" value="10">超值全餐10号餐 <p> <center> <input type="button" name="order" id="order" value="送出订单" onClick="doOrder();"> <input type="button" name="modify" id="modify" value="修改订单" onClick="changeOrder();"> <input type="button" name="cancel" id="cancel" value="取消订单" onClick="cancelOrder();"> </center> </p></body></html>先看看当我们选好餐点按下送出订单后会有什么效果：
大致上就是告知点餐者点的餐点跟欢迎下次光临的客套话！
而要达到此一目的的JS源码如下：
function doOrder() { var msg4Order = '您点的是\n'; if ($('#menu1').prop('checked')) msg4Order += $('#menu1').val() + '号餐\n'; if ($('#menu2').prop('checked')) msg4Order += $('#menu2').val() + '号餐\n'; if ($('#menu3').prop('checked')) msg4Order += $('#menu3').val() + '号餐\n'; if ($('#menu4').prop('checked')) msg4Order += $('#menu4').val() + '号餐\n'; if ($('#menu5').prop('checked')) msg4Order += $('#menu5').val() + '号餐\n'; if ($('#menu6').prop('checked')) msg4Order += $('#menu6').val() + '号餐\n'; if ($('#menu7').prop('checked')) msg4Order += $('#menu7').val() + '号餐\n'; if ($('#menu8').prop('checked')) msg4Order += $('#menu8').val() + '号餐\n'; if ($('#menu9').prop('checked')) msg4Order += $('#menu9').val() + '号餐\n'; if ($('#menu10').prop('checked')) msg4Order += $('#menu10').val() + '号餐\n'; alert(msg4Order + "感谢您的惠顾,欢迎下次光临！");}因为以上是必备功能，所以基本上与 User Friendly 完全无关
「重点来了，当使用者按下修改订单或取消订单要做什么事呢？」
(不然就强迫使用者棋手无回，下面加注法律标语，流单就告他
)
以我这边的设计，修改订单时，就是把所有的勾选取消让使用的重新选！
因为使用者都意识到要修改了，之前的勾选就是选错了没有保留的必要！
这部分的 JS源码如下：
function changeOrder() { $('#menu1').prop('checked', false); $('#menu2').prop('checked', false); $('#menu3').prop('checked', false); $('#menu4').prop('checked', false); $('#menu5').prop('checked', false); $('#menu6').prop('checked', false); $('#menu7').prop('checked', false); $('#menu8').prop('checked', false); $('#menu9').prop('checked', false); $('#menu10').prop('checked', false);}至于最后的取消订单，以贴在JS Bin上的案例可能看不太出来跟修改订单的差异！
具体来说就想像成经过得来速点餐车道时，服务员询问点餐的当下，
而你回答「我只是要开车迴转！」的这种情形！
大致上就是让页面refresh()重刷，準备迎接下一个客人。
由于重刷的动作就是重新载入页面，原来的勾选纪录也会被洗掉。
以上就是小弟的分享，欢迎版上大大及高手们针对Checkbox在使用上还有什么相关的
user friendly经验，在此提出分享！
ps. 其实上面这个案例的checkbox建议用个class属性来操作，JS会少写一些！
微信扫一扫打赏
支付宝扫一扫打赏
