javascript中radio框触发事件弹出多个多选框，我修改多选框。点击另外一个radio时保存那些之前勾选的数据

Posted 2023-05-17

javascript中页面左侧选中一个radio框时，触发事件页面右面切换显示多个多选框，我修改多选框。点击另外一个radio时保存之前勾选的数据。再次点击刚才的radio时，自动勾选上之前选择的

        <div style="float: left">
            <input type="radio" name="rd" id="rd1" value="1" checked="checked" onclick="change(this)" /><input type="text" name="txt_rd" id="rd1_txt" />
            <br />
            <input type="radio" name="rd" id="rd2" value="2" onclick="change(this)" /><input type="text" name="txt_rd" id="rd2_txt" style="display: none" />
        </div>
        <div id="rd_div" style="float: left">
            <div id="rd1_div">
                <input type="checkbox" value="11" />11
                <input type="checkbox" value="12" />12
                <input type="checkbox" value="13" />13
            </div>
            <div id="rd2_div" style="display: none">
                <input type="checkbox" value="21" />21
                <input type="checkbox" value="22" />22
                <input type="checkbox" value="23" />23
            </div>
        </div>
        <script type="text/javascript">
            function change(arg) 
                var rd = arg;
                var thisdiv = document.getElementById(rd.id + "_div");
                var divs = document.getElementById('rd_div').getElementsByTagName('div');
                for (var i = 0; i < divs.length; i++) 
                    if (divs[i].id == thisdiv.id) 
                        divs[i].style.display = '';
                    
                    else 
                        divs[i].style.display = 'none';
                    
                    var chbs = divs[i].getElementsByTagName('input');
                    var checkedstr = "";
                    for (var j = 0; j < chbs.length; j++) 
                        if (chbs[j].checked) 
                            checkedstr += chbs[j].value + ',';
                        
                    
                    var txt = document.getElementById(divs[i].id.substring(0, 3) + "_txt");
                    txt.value = checkedstr;
                
                var thistxt = document.getElementById(rd.id + "_txt");
                var txts = document.getElementsByName('txt_rd');
                for (var i = 0; i < txts.length; i++) 
                    if (txts[i].id == thistxt.id) txts[i].style.display = '';
                    else txts[i].style.display = 'none';
                
            
        </script>

简单快捷,不解释! @_@

参考技术A 多选框顺序赋值id 1,2,3,4,5....，获取到所有多选框，用input保存状态为选中的多选框id，点下一个radio的时候，把保存的拿出来，对应的选中就行了，此方法可能很烂 但是应该可以解决问题哦 参考技术B 最简单的思路，用隐藏实现，隐藏DIV要在form中 参考技术C 你好！！

有html代码么，贴出比较好搞一点····

微信公众号弹出框在IOS最新系统中点击键盘上的“完成”导致事件无法触发问题

微信公众号弹出框在IOS最新系统中点击键盘上的“完成”导致事件无法触发问题

问题描述

微信公众号中有项功能是弹框模态框，输入信息后保存操作。但是在IOS系统中发现，当输入内容后，点击键盘上的“完成”后，再点击“提交”无反应；跳过“完成”直接点击“提交”就可以正常保存

问题原因

当键盘弹出后，会将body向上弹起；但是点击“完成”后并没有将body拉回，导致点击事件不在body内而无法触发。

解决方案

点击ios键盘的“完成”按钮会触发失焦事件，安卓不会；因此在失焦事件中触发浏览器的重绘就行了。

方法一：

$("input").blur(function () {
  document.body && (document.body.scrollTop = document.body.scrollTop);
})

方法二：

;(/iphone|ipod|ipad/i.test(navigator.appVersion) && document.addEventListener("blur", (e) => {
  ["input", "textarea"].includes(e.target.localName) && document.body.scrollIntoView(false);
}), true)

参考

ios最新系统bug与解决--微信公众号中弹出键盘再收起时，原虚拟键盘位点击事件无效