Question

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

DEMO WORKS FOR CHECKBOX NOT RADIO GROUPS

如何修改它以便它适用于同一功能中的单选按钮和复选框？在这个例子中，我可以单击Item4，但是在点击广播组中的其他内容时它不会隐藏。

它应该如何运作：把data-info-id =＆＃34; infox＆＃34;在输入上把id =＆＃34; infox＆＃34;在容器上通常是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;
    }

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

    });

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

    }

});

这对我有用。它有点下降和肮脏，但它的工作正常。

Answer 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值。

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

2 个答案: