将显示/隐藏切换与单选按钮和复选框相结合答案

【问题标题】：Combining show/hide toggle with radio buttons AND checkboxes将显示/隐藏切换与单选按钮和复选框相结合
【发布时间】：2014-10-11 21:48:22
【问题描述】：

我可以切换复选框的显示/隐藏，因为它可以取消选中，但单选组上的行为不同，因为单击选中的单选按钮不会取消选中它，只会单击同一组中的另一个单选按钮。

DEMO WORKS FOR CHECKBOX NOT RADIO GROUPS

如何修改它，使其适用于同一功能中的单选按钮和复选框？在此示例中，我可以单击 Item4，但它不会在单击单选组中的其他项时隐藏。

它应该如何工作：将 data-info-id="infox" 放在输入上将 id="infox" 放在容器上，通常是一个 div

欢迎使用 jQuery 解决方案。

HTML

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

CSS

[id^="info"] { 

          display: none;
    }

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';
      }

    });

【问题讨论】：

标签： javascript jquery html css radiobuttonlist

【解决方案1】：

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

<div id="checkbox">
    <input type="checkbox" id="item1" data-info-id="info1" />
    <label for="item1">Item 1 Checkbox</label>
</div>
<br/>
<div id="info1">Content checkbox group</div>
</p>
<div id="radios">
    <input type="radio" id="jb1" name="jb" />
    <label for="jb1">Item2 Radio</label>
    <br/>
    <input type="radio" id="jb2" name="jb" />
    <label for="jb2">Item3 Radio</label>
    <br/>
    <input type="radio" id="jb3" name="jb" data-info-id="info2" />
    <label for="jb3">Item4 Radio</label>
    <br/>
</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';
        }

    }

});

这对我有用。它有点低落和肮脏，但效果很好。

【讨论】：

很遗憾，如果您希望 3 个单选按钮中的两个显示 div 而第一个单选按钮隐藏 div，那么它不起作用，您能解决这个问题吗？

【解决方案2】：

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

方法1 有 2 个单选按钮显示和隐藏。

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

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

所以基本上data-info-id 在两个单选按钮中都给出，并且在它们的更改中，div 被切换。

方法2 只有一个单选按钮，让它像复选框一样工作

$("#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 值。

【讨论】：