时间戳

首页 > 解决方案 > 选中另一个框时 JavaScript 取消选中框

javascript - 选中另一个框时 JavaScript 取消选中框

问题描述

我的 JS 代码有问题。

我有 2 个复选框。何时检查的每个复选框将显示不同的 div 信息。用户可以选择只选中一个复选框。当我按选项 1 时，将显示 div。如果我取消选中选项 1，则 div 将消失。还行吧。问题是当我检查第二个选项而不手动取消选中时，所有 div 都会显示。我试图搜索像我这样的问题，但我没有找到正确的答案。谢谢你的帮助。

JS

<script type="text/javascript">
    function showMe (box) {

        var chboxs = document.getElementsByName("o1");
        var vis = "none";
        for(var i=0;i<chboxs.length;i++) {
            if(chboxs[i].checked){
                vis = "block";
                break;
            }
        }
        document.getElementById(box).style.display = vis;

    }

    function cbChange(obj) {

        if(obj.checked)
        {

            var cbs = document.getElementsByName("o1");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = false;
            }
            obj.checked = true;
        }
    }


</script>

HTML

                <input type="checkbox" name="o1"  class="checked" onclick="showMe('div1')" onchange='cbChange(this)'>Option 1 - Recommended

                <div class="clear"></div>

                <input type="checkbox" name="o1"  class="checked" onclick="showMe('div2')" onchange='cbChange(this)'>Option 2 - Optional

标签： javascriptphphtml

解决方案

<script type="text/javascript">
    $(document).ready(function(){

        $('input[type="radio"]').click(function(){

            var inputValue = $(this).attr("value");

            var targetBox = $("." + inputValue);

            $(".box").not(targetBox).hide();

            $(targetBox).show();

        });

    });


</script>

            <input type="radio" name="colorRadio" value="option1"> Option 1 - Recommended
            <div class="clear"></div>
            <input type="radio" name="colorRadio" value="option2"> Option 2 - Optional


<div id="div2" class="option2 box" style="display: none">
<div id="div1" class="option1 box" style="display: none">

推荐阅读