[JavaScript] 用 jQuery 根据输入值来选中复选框


根据输入值来选中复选框

1. 主要需求

  • 根据输入的值来选中对应的复选框选项。
  • 完成效果如下图所示:
    在这里插入图片描述

2. 代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选中输入值</title>
    <script src="../js/jquery-1.11.3.min.js"></script>
</head>
<body>
请输入城市:<input type="text" id="id" />
<br/><br/>
<input type="button" value="判断" onclick="selectValue();" />
<br/><br/>
城市复选框:
<div style="width:240px;background:red;">
    <input type="checkbox" name="love" value="北京" />北京&emsp;
    <input type="checkbox" name="love" value="南京" />南京&emsp;
    <input type="checkbox" name="love" value="上海" />上海&emsp;
</div>
<script type="text/javascript">
    function selectValue(){//点击判断按钮时执行
        //把所有的复选框取消选中
        $('div input[type="checkbox"]').prop("checked",false);
        //获取输入的城市
        let city = $('#id').val();
        //根据输入的城市获取对应的复选框,设置选中
        $('div input[value="'+city+'"]').prop("checked",true);
    }
</script>
</body>
</html>

原文链接:https://qwert.blog.csdn.net/article/details/105454371

发布了369 篇原创文章 · 获赞 381 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/Regino/article/details/105454371