Utworzyłem pola wyboru typu input jak poniżej:

<input type="checkbox" class="" value="1" name="foo" />
<input type="checkbox" class="" value="1" name="foo" />
<input type="checkbox" class="" value="1" name="foo" />

Teraz chcę, aby pole wyboru działało jako przycisk radiowy, jak pojedynczy wybór. więc używanie jquery działa dobrze:

$("input:checkbox").click(function(){
    var group = "input:checkbox[name='"+$(this).prop("name")+"']";
    $(group).prop("checked",false);
    $(this).prop("checked",true);
});

Ale teraz, jeśli chcę odwrócić to pole wyboru działa jako pole wyboru za pomocą jquery, to nie działa.

0
Amit Senjaliya 5 styczeń 2022, 14:00
2
Jakiś powód, dla którego nie możesz po prostu użyć przycisków radiowych?
 – 
Rory McCrossan
5 styczeń 2022, 14:01
1
Co masz na myśli? Dlaczego miałbyś dodawać coś dwa razy? Jeśli chcesz zachować działanie przycisku radiowego, użyj przycisków radiowych. Dlatego istnieją. Nie jest jasne, na czym polega problem, a Twój komentarz go nie wyjaśnia. Spróbuj lepiej zrozumieć Twoje trudności. PS To nie ma nic wspólnego z PHP, przetagowałem to dla Ciebie.
 – 
ADyson
5 styczeń 2022, 14:03
1
W takim przypadku kod po stronie serwera powinien zdecydować podczas renderowania pytania, czy renderować pola wyboru lub przyciski radiowe, w zależności od typu pytania. To nie powinien być problem jQuery. Proponowane przez Ciebie rozwiązanie polegające na bałaganiu z polami wyboru to straszna robota. Ponadto będzie to mylące dla użytkownika, ponieważ wszyscy oczekują pól wyboru, aby można było za ich pomocą wybrać wiele elementów. Tak są zamierzone. Jeśli więc zmienisz to, aby mogli wybrać tylko jedną, mogą pomyśleć, że coś jest nie tak z Twoją witryną. O wiele lepiej jest zapewnić ludziom standardowe wrażenia użytkownika.
 – 
ADyson
5 styczeń 2022, 14:10
1
Całkowicie zgadzam się z @ADyson. Zaproponowane przez Ciebie rozwiązanie nie jest bezpiecznym ani niezawodnym sposobem rozwiązania problemu, który masz. Ustalenie, jak renderować pytanie i jakich kontrolek należy użyć do wyboru odpowiedzi (odpowiedzi), należy wykonać po stronie serwera.
 – 
Rory McCrossan
5 styczeń 2022, 14:12
1
Jak więc dokładnie jest pytanie „wstawione od strony administratora”? Administrator musi określić typ pytania i/lub liczbę wymaganych odpowiedzi, jak zakładam? Wtedy pomyślałbym, że informacje są zapisane w bazie danych, gotowe do użycia, gdy użytkownik weźmie udział w quizie? Oznacza to, że kiedy twój kod decyduje, jak wyświetlić pytanie na ekranie osobie biorącej udział w quizie, może spojrzeć na te informacje o liczbie wymaganych odpowiedzi i zdecydować, czy umieścić kilka pól wyboru, czy przycisków radiowych. Myślę, że całkiem dobrze zrozumiałem, dziękuję.
 – 
ADyson
5 styczeń 2022, 14:14

4 odpowiedzi

Najlepsza odpowiedź

Jest to możliwe, ale naprawdę nie powinieneś tego robić. Doprowadzi to do złego doświadczenia użytkownika, ponieważ użytkownik zazwyczaj zakłada, że ​​zestaw pól wyboru oznacza, że ​​może wybrać więcej niż jedno, jeśli chce. Jeśli widzą przyciski opcji, wiedzą, że muszą dokonać jednego wyboru. Jeśli znajdą zestaw pól wyboru, w których nie mogą wybrać więcej niż jednego, może to być frustrujące, a nawet mogą pomyśleć, że w Twojej aplikacji jest błąd.

Poza tym, po co miałbyś „ponownie włączać” cokolwiek? Po uzyskaniu odpowiedzi na pytanie wyrenderujesz zamiast tego nowe pytanie. Nie użyłbyś ponownie tych samych znaczników dla nowego pytania... to nie ma sensu.

Zamiast tego, podczas renderowania każdego pytania, spraw, aby Twój kod (po stronie klienta lub po stronie serwera, zgodnie z Twoją architekturą renderowania) generował odpowiednio albo pola wyboru lub przyciski radiowe, w zależności od tego, czy Twoja baza danych wskazuje, że pytanie wymaga wielu lub pojedynczych odpowiedzi. Powinno to być zarówno prostsze niż rozwiązania, które manipulują zachowaniem pola wyboru, jak i prowadzić do lepszego interfejsu użytkownika.

0
ADyson 5 styczeń 2022, 14:44
Dzięki za wyjaśnienie kolego. Chcę tylko wiedzieć, jak to możliwe dzięki manipulacji jquery
 – 
Amit Senjaliya
5 styczeń 2022, 14:26
Spójrz więc na inne odpowiedzi. Ale nie mogę zrozumieć, dlaczego chcesz nadal poświęcać czas i energię na rozwiązanie, o którym wiesz, że nie jest najlepsze, podczas gdy lepsze rozwiązanie byłoby prawdopodobnie prostsze.
 – 
ADyson
5 styczeń 2022, 14:33
Masz rację. Chcę tylko wiedzieć, czy mogę włączyć wielokrotny wybór po wyłączeniu.
 – 
Amit Senjaliya
5 styczeń 2022, 14:35
Nie musisz, ponieważ zamiast tego powinieneś po prostu zrobić przycisk radiowy. Dlaczego miałbyś cokolwiek „ponownie włączać”? Po uzyskaniu odpowiedzi na pytanie wyrenderujesz zamiast tego nowe pytanie. Nie użyłbyś ponownie tych samych znaczników dla nowego pytania... to nie ma sensu.
 – 
ADyson
5 styczeń 2022, 14:36
Dzieki za sugestie. zrobię to
 – 
Amit Senjaliya
5 styczeń 2022, 14:38

Wypróbuj z Dodaj klasę multipal

<input type="checkbox" class="multipal" value="1" name="foo" />

$("input:checkbox").click(function(){
    var group = "input:checkbox[name='"+$(this).prop("name")+"']";
    if($(this).hasClass('multipal')){
      $(this).prop("checked",true);  
    }
    else{
      $(group).prop("checked",false);
      $(this).prop("checked",true);
    }
});
$("input:checkbox").click(function(){
    var group = "input:checkbox[name='"+$(this).prop("name")+"']";
    if($(this).hasClass('multipal')){
      $(this).prop("checked");  
    }
    else{
      $(group).prop("checked",false);
      $(this).prop("checked",true);
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="" value="1" name="foo" />
<input type="checkbox" class="" value="1" name="foo" />
<input type="checkbox" class="" value="1" name="foo" />

<h2>Multipal<h2>
<input type="checkbox" class="multipal" value="1" name="foo" />
<input type="checkbox" class="multipal" value="1" name="foo" />
<input type="checkbox" class="multipal" value="1" name="foo" />
0
Lalji Tadhani 5 styczeń 2022, 14:16
Użycie prostej funkcji .not() jQuery jest o wiele prostsze, zobacz moją odpowiedź
 – 
Vaibhav Garg
5 styczeń 2022, 14:21
Załóżmy, że istnieją tylko powyższe trzy pola wyboru, chcę, aby działał jak przycisk radiowy, a także odwrócił się jako pole wyboru pod pewnym warunkiem
 – 
Amit Senjaliya
5 styczeń 2022, 14:27
Chodzi mi o to, jak mogę ponownie włączyć wielokrotny wybór?
 – 
Amit Senjaliya
5 styczeń 2022, 14:32

Powinieneś używać przycisków radiowych, ale jeśli musisz użyć pola wyboru:

$("input:checkbox").change(function(){
  $("input:checkbox").not(this).prop("checked",false);
});
0
Vaibhav Garg 5 styczeń 2022, 14:10

Możesz odpiąć obsługę kliknięcia

    $("input:checkbox").click(function(){
        var group = "input:checkbox[name='"+$(this).prop("name")+"']";
        $(group).prop("checked",false);
        $(this).prop("checked",true);
    });
    function disableRadio ( ) {
        $("input:checkbox").unbind();
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <input type="checkbox" class="" value="1" name="foo" />
    <input type="checkbox" class="" value="1" name="foo" />
    <input type="checkbox" class="" value="1" name="foo" />   
    <button type="button" onclick="disableRadio()">Disable Radio</button> 
</body>
</html>
0
Elias Nacher Fernandez 5 styczeń 2022, 14:13