【js】checkbox的单选

最新推荐文章于 2023-10-24 13:27:46 发布

转载最新推荐文章于 2023-10-24 13:27:46 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CESC4/p/7791821.html

本文介绍了一个基于HTML和JavaScript实现的区域范围选择器功能。通过复选框的方式让用户可以选择不同的海里范围(100, 150, 200)，并提供了对应的交互逻辑，确保每次只能选择一个范围。

<div id="areaRange" class="boardingList shipIcon7 shipIcon8">
    <div class="cb"><label>区域范围</label>
        <input type="checkbox" name="areaRange" value="100" onclick="areaRangeCheck(this)"/><label>100海里</label>
    </div>
    <div class="cb pr">
        <input type="checkbox" name="areaRange" value="150" onclick="areaRangeCheck(this)"/><label>150海里</label>
    </div>
    <div class="cb pr">
        <input type="checkbox" name="areaRange" value="200" onclick="areaRangeCheck(this)"/><label>200海里</label>
    </div>
    <!--<input type="radio" id="range100" name="areaRange" value="100"/><label>100海里</label></div>-->
    <!--<div class="cb pr"><input type="radio" id="range150" name="areaRange" value="150"/><label>150海里</label></div>-->
    <!--<div class="cb pr"><input type="radio" id="range200" name="areaRange" value="200"/><label>200海里</label></div>-->
</div>

function areaRangeCheck(ele) {
    var flag=ele.checked;
    console.log(flag);
    if(flag==true){
        $("#areaRange").find('input[type="checkbox"]').attr('checked',false);
        ele.checked=true;
    }else{
    }
}

转载于:https://www.cnblogs.com/CESC4/p/7791821.html