checkbox

原创已于 2022-11-28 20:19:12 修改 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#php #jquery #html

于 2022-11-28 17:18:22 首次发布

场景：表单生成后，通过checkbox对相应元素进行操作（如显示密码）。

代码段：

<td >{$items['title']}</td>
<td >{$items['account']}</td>
<td style="width: 30%;">
    <label class="form-check form-switch" >
         <input class="form-check-input" type="checkbox" value="{$items['id']}" onclick="checkboxOnclick(this)">
         <span class="form-check-label" id="pA{$items['id']}" style="">******</span>
         <span class="form-check-label" id="pB{$items['id']}" style="display: none;">{$items['password']}</span>
    </label>
</td>

要点：用当前数据的id对当前checkbox赋值：value="{$items['id']}"，且绑定事件：οnclick="checkboxOnclick(this)"；同理假密码：id="pA{$items['id']}"；同理真密码：id="pB{$items['id']}"。

function checkboxOnclick(checkbox){
    var id = checkbox.value;
    var pA ="pA"+id;
    var pB ="pB"+id;
    if ( checkbox.checked == true){
        $("#"+pA).css('display','none');
        $("#"+pB).css('display','');
    }else{
        $("#"+pA).css('display','');
        $("#"+pB).css('display','none');
    }
}

要点：点击时，通过checkbox的value拼接出真假密码的id值,通过当前checkbox的true或false来操作显示选密码。