Avatar billede Emma Seniormester
08. december 2021 - 16:04 Der er 1 kommentar og
1 løsning

få 4 checkboxe til at virke som radioboxe

Jeg har fundet 2 javascript filer som ved den rigtige indtastning skal kunne virke. Jeg tænker, at den skal gøre følgende når man klikker på den ene slukker den anden og omvendt som i fil 1. Der skal klikkes i combiboksen som i den anden og der skal vises et tekststykke som i fil 2. Jeg håber der er et geni der kan hjælpe mig.

-------------------------------------------------------------------------------------------------------
Fil 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Check/Uncheck Checkbox</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $(".check").click(function(){
        $("#myCheck").prop("checked", true),
        $("#nyCheck").prop("checked", false);
    });
   
    $(".checken").click(function(){
        $("#nyCheck").prop("checked", true),
        $("#myCheck").prop("checked", false);
    });
 
});
</script>
</head>
<body>
    <p><input type="checkbox" id="myCheck"> Are you sure?</p>
    <p><input type="checkbox" id="nyCheck"> Yes I'm sure!</p>
    <button type="button" class="check">Yes-my</button>
    <button type="button" class="checken">Yes-ny</button>
</body>
</html>
-----------------------------------------------------------------------------------------------------
Fil2:
<!DOCTYPE html>
<html>
<body>

<p>Display some text when the checkbox is checked:</p>

<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck" onclick="myFunction()">
<input type="checkbox" id="nyCheck" onclick="nyFunction()">

<p id="text1" style="display:none">Checkbox is CHECKED!</p>
<p id="text2" style="display:none">Checkbox is olso CHECKED!</p>

<script>

function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var text1 = document.getElementById("text1");
  if (checkBox.checked == true){
    text1.style.display = "block";
  } else {
    text1.style.display = "none";
  }
}

function nyFunction() {
  var checkBox = document.getElementById("nyCheck");
  var text2 = document.getElementById("text2");
  if (checkBox.checked == true){
    text2.style.display = "block";
  } else {
    text2.style.display = "none";
  }
}
</script>

</body>
</html>
Avatar billede Henrik Hansen Forsker
09. december 2021 - 10:30 #1
Idéen er, at deaktivere alle checkboxes, og så aktivere den der lige er klikket på.
Jeg har skrevet koden i almindelig ("Vanilla") JavaScript og i jQuery.
Som du kan se er jQuery-udgaven langt mere kompakt, men gør nøjagtig det samme.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>

<p>Display some text when the checkbox is checked:</p>

<div id="myCheckboxGroup">
<label for="myCheck">Checkbox:</label>
<input type="checkbox" id="myCheck">
<input type="checkbox" id="nyCheck">
<input type="checkbox" id="aaCheck">
<input type="checkbox" id="bbCheck">
<input type="checkbox" id="ccCheck">
</div>
<p id="text1" style="display:none"></p>
<p id="text2" style="display:none"></p>

<div id="jqueryCheckboxGroup">
    <label for="j1_myCheck">jQuery Checkboxes:</label>
    <input type="checkbox" id="j1_myCheck">
    <input type="checkbox" id="j2_nyCheck">
    <input type="checkbox" id="j3_aaCheck">
    <input type="checkbox" id="j4_bbCheck">
    <input type="checkbox" id="j5_ccCheck">
</div>
   
<script>
// Alle inputs som er checkbox i div'en med id 'myCheckboxGroup' (så koden ikke finder ALLE checkes i hele dit dokument)
var alle_checkboxes = document.querySelectorAll('#myCheckboxGroup input[type="checkbox"]');

// Behandl alle fundne checkboxes
alle_checkboxes.forEach(function(checkbox) {
    // Sæt en Click-EventHandler på
    checkbox.addEventListener('click', function(e) {
        // Husk hvilken checkbox som blev klikket på
        var denne_checkbox = this;

        // Fjern 'checked' fra alle checkboxes
        alle_checkboxes.forEach(el => el.checked = false);

        // Vent lidt og sæt 'checked' aktiv på den klikkede checkbox
        setTimeout(function(){
            denne_checkbox.checked = true

            // Udskriv lidt info om den klikkede checkbox
            var text1 = document.getElementById("text1");
            var text2 = document.getElementById("text2");
            text1.style.display = 'block';
            text2.style.display = 'block';
            text1.innerHTML = 'En Checkbox blev klikket!';
            text2.innerHTML = 'Du klikkede på ' + denne_checkbox.getAttribute('id');
        }, 50); // 50 milisekunder skulle være nok til at browser er færdig med at fjerne 'checked' på alle checkboxers
    });
});


// jQuery
$('#jqueryCheckboxGroup input[type="checkbox"]').on('click', function() {
    $('#jqueryCheckboxGroup input[type="checkbox"]').prop('checked', false);
    $(this).prop('checked', true);
    $('#text1').show().text('En Checkbox blev klikket!');
    $('#text2').show().text('Du klikkede på jQuery checkbox ' + this.id);
});
</script>

</body>
</html>
Avatar billede Emma Seniormester
09. december 2021 - 15:31 #2
Jeg vil sige tak for svaret, nu kan jeg komme videre i mit program.
Det er smart med jquery, men jeg er ikke nogen ørn til programmering, så derfor må jeg i første omgang acceptere det jeg kan finde ud af.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester