Mogę przełączać program Checkbox, ponieważ może być niezaznaczony, ale zachowanie jest inne w grupie radiowej, ponieważ kliknięcie przycisku sprawdzonego radiu nie usuwa tylko kliknięciem innego przycisku radiowego w tej samej grupie.

Demo działa do pola wyboru, a nie grupy radiowe

Jak mogę to zmodyfikować, więc działa dla przycisków radiowych i pola wyboru w tej samej funkcji? W tym przykładzie mogę kliknąć pozycję4, ale nie ukrywa się po kliknięciu innych w grupę radiową.

Jak powinno to działać: Ustaw dane-info-ID = "INFOX" na wejściu PUT ID = "INFOX" na pojemniku zwykle div

Rozwiązania jQuery są mile widziane.

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

    });
1
DivineChef 19 sierpień 2014, 01:42

2 odpowiedzi

Najlepsza odpowiedź

Po raz pierwszy dodałem dwa zawierające div wokół pola wyboru, a przyciski radiowe:

<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>

Następnie dodałem pętlę do pętli przez dzieci z rodzica klikniętego elementu. Ponieważ wywołując tylko zdarzenie zmiany dla klikniętego elementu.

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

    }

});

To działa dla mnie. Jest trochę w dół i brudny, ale działa dobrze.

1
Andy Day 31 lipiec 2015, 17:25

Dla przycisków radiowych. Można to zrobić na 2 sposoby: Oto jsfiddle: http://jsfiddle.net/Zvzl8u1n/


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

jbM1 jest nazwą dla obu przycisków radiowych.

Tak więc zasadniczo data-info-id jest podawany zarówno w przyciskach radiowych, jak i na ich zmianie DIV jest przełączany.


Metoda2 Masz tylko jeden przycisk radiowy i sprawi, że działa jak pole wyboru

$("#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 jest identyfikator przycisku radiowego i {x1}} służy do przechowywania poprzedniej wartości.

0
Himanshu Tyagi 18 sierpień 2014, 22:43