解决前端网页单选框radio无法实现单选的问题

2020年10月3日 分类:原创 作者:清心涟漪

预计所需阅读时间:6分钟

之前用Flask修改一个商城时,在网页模板中,写以下单选框代码:

<div class="form-group">
<label for="address"><b>选择地址:</b></label>
<ul id="address_list">
    {% for address in addresses %}
        <li class="address_li"><label class="radio">
            <input type="radio" name="add_{{ address.id }}" id="add_{{ address.id }}"
                   value="{{ address.receiver }}:{{ address.mobile }}:{{ address.address }}"/>
            {{ address.receiver }},{{ address.mobile }},{{ address.address }}
        </label></li>
    {% endfor %}
</ul>
</div>

这样生成的单选地址列表无法实现单选,原因是input标签的name属性因为模版语法的原因会有不同的值。要想让浏览器认为这些单选项是属于同一个项目addresses地址项目的选择,要让input标签里的name属性使用相同的值,即可

<div class="form-group">
<label for="address"><b>选择地址:</b></label>
<ul id="address_list">
    {% for address in addresses %}
        <li class="address_li"><label class="radio">
            <input type="radio" name="addresses" id="add_{{ address.id }}"
                   value="{{ address.receiver }}:{{ address.mobile }}:{{ address.address }}"/>
            {{ address.receiver }},{{ address.mobile }},{{ address.address }}
        </label></li>
    {% endfor %}
</ul>
</div>

这里顺便总结一下写Flask的Jinjia2模版语法,写前端网页模版的心得。

name属性一般不用写,因为可以用id选择到特定的元素。如果用在单选框、多选框或一类元素时,会有多个同名的元素,这时,也添加一个class属性,让class属性与name属性的值相同,选择这一类元素即可。

class属性是指向一类元素,例如:同一个列表下的每个列表项类的值相同,前面就是<li class="address_li">,用JQ语法选中它们就是:$('.address')。

id属性是指向一个元素,例如:列表中某一个列表项ID是唯一的,前面就是<input type="radio" id="add_{{ address.id }}" />,这里就可以用模版语法加一个前缀的形式,用JQ语法选中它就是:$('#add_12')。Javascript部分可以通过模版语法生成针对不同元素的特定的操作。或者用Javascript的函数将id值作为参数传到函数内部。

单选radio或多选checkbox里的value可以模版语法引入复杂的值,也可写简单不同的值来区分,这里后面我要用JS处理这些单选的值,用了中文冒号分隔收件信息的收件人、电话和地址,分别填入不同的框。参考代码如下:

<script type="text/javascript">
// 选择地址,自动填入表单
$(document).ready(function () {
    $('input[type=radio][name="addresses"]').change(function () {
        var addr = $('input:radio[name="addresses"]:checked').val()
        receiver = addr.split(":")[0]
        mobile = addr.split(":")[1]
        address = addr.split(":")[2]
        console.log(receiver, mobile, address)
        $('#receiver').val(receiver)
        $('#mobile').val(mobile)
        $('#address').val(address)
    })
})
</script>

模版语法的循环语法句一般会用在列表项和表单项的生成上;判断语法用来决定某个元素是否要在前端界面显示。

另外,表单的的重置按钮的id, name不要设置为reset,否则会有reset is not a function错误,原因这里说了:https://wangye.org/blog/archives/1075/

继续阅读