首页 文章

将显示/隐藏切换与单选按钮和复选框组合在一起

提问于
浏览
1

我可以切换复选框的显示/隐藏,因为它可以取消选中但无线电组的行为不同,因为单击选中的单选按钮不会取消选中它,只需单击同一组中的另一个单选按钮 .

DEMO WORKS FOR CHECKBOX NOT RADIO GROUPS

如何修改它以便它适用于同一功能中的单选按钮和复选框?在这个例子中,我可以单击Item4但是在单击无线电组中的其他内容时它不会隐藏 .

它应该如何工作:将data-info-id =“infox”放在容器上的输入Put id =“infox”通常是一个div

欢迎使用jQuery解决方案 .

HTML

<input type="checkbox" id="item1" data-info-id="info1" />
    <label for="item1">Item 1 Checkbox</label>
    
<div id="info1">Content checkbox group</div> </p> <input type="radio" id="jb1" name="jb" /> <label for="jb1">Item2 Radio</label>
<input type="radio" id="jb2" name="jb" /> <label for="jb2">Item3 Radio</label>
<input type="radio" id="jb3" name="jb" data-info-id="info2" /> <label for="jb3">Item4 Radio</label>
<div id="info2">Content radio group</div>

CSS

[id^="info"] { 

          display: none;
    }

JS

document.addEventListener('change', function(e) {
      var id = e.target.getAttribute('data-info-id');
      var checked = e.target.checked;
      if (id) {
        var div = document.getElementById(id);
        if (div)
          div.style.display = checked ? 'block' : 'none';
      }

    });

2 回答

  • 1

    我首先在复选框和单选按钮周围添加了两个包含div:

    <div id="checkbox">
        <input type="checkbox" id="item1" data-info-id="info1" />
        <label for="item1">Item 1 Checkbox</label>
    </div>
    
    <div id="info1">Content checkbox group</div> </p> <div id="radios"> <input type="radio" id="jb1" name="jb" /> <label for="jb1">Item2 Radio</label>
    <input type="radio" id="jb2" name="jb" /> <label for="jb2">Item3 Radio</label>
    <input type="radio" id="jb3" name="jb" data-info-id="info2" /> <label for="jb3">Item4 Radio</label>
    </div> <div id="info2">Content radio group</div>

    然后我添加了一个for循环来遍历所点击项目的父项的子项 . 因为它只触发所点击项目的更改事件 .

    document.addEventListener('change', function (e) {
    
        var children = e.target.parentNode.children;
    
    
        for(var i = 0; i < children.length ; i ++)
        {
    
            var id = children[i].getAttribute('data-info-id');
            var checked = children[i].checked;
    
            if (id) {
                var div = document.getElementById(id);
                if (div) div.style.display = checked ? 'block' : 'none';
            }
    
        }
    
    });
    

    这对我有用 . 它有点下降和脏,但它的工作正常 .

  • 0

    对于单选按钮 . 这可以通过两种方式完成:这是jsFiddle:http://jsfiddle.net/zvzL8u1n/


    Method1 有2个单选按钮显示和隐藏 .

    $("input[name=jbM1]").change(function(){
        $("#" + $(this).data("info-id")).toggle();
    });
    

    jbM1 是两个单选按钮的名称 .

    因此基本上 data-info-id 在两个单选按钮中给出,并且在他们更改时,div被切换 .


    Method2 只有一个单选按钮,使其像复选框一样工作

    $("#jb3").click(function(){
        var prev = $(this).data('prev');
        if(prev == true){
            $(this).prop('checked', false);
        }
        $(this).data('prev', $(this).prop('checked'));
        $("#" + $(this).data("info-id")).toggle();
    });
    

    jb3 是单选按钮的id, data-prev 用于存储prev值 .

相关问题