jQuery wenn Kontrollkästchen aktiviert sind, ändern Sie den Link

Question

Ich brauche ein jQuery-Skript. Ich habe drei Chechboxen und zwei Links. Wenn alle drei Kontrollkästchen aktiviert sind, zeigen Sie sie Link 1. Wenn nur 1 oder 2 Kontrollkästchen aktiviert sind, ist es Link 2.

function toggleLink(checkBox){ 
 
    var link = document.getElementById("agreeLink"); 
 
    if (checkBox.checked) 
 
    link.style.display = "inline"; 
 
    else 
 
    link.style.display = "none"; 
 

 
    var link = document.getElementById("dontagreeLink"); 
 

 
    if (checkBox.checked) 
 
    link.style.display = "none"; 
 
    else 
 
    link.style.display = "inline"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <section title=".agreeCheckbox"> 
 
    <div class="agreeCheckbox"> 
 
     <input type="checkbox" value="None" id="agreeCheckbox1" name="agreeCheckbox" unchecked onchange="toggleLink(this);"/> 
 
     <label for="agreeCheckbox"></label> 
 
    </div> 
 
    </section> 
 
</div> 
 

 
<div style="padding-top:100px;"> 
 
    <section title=".agreeCheckbox"> 
 
    <div class="agreeCheckbox"> 
 
     <input type="checkbox" value="None" id="agreeCheckbox" name="agreeCheckbox" unchecked onchange="toggleLink(this);"/> 
 
     <label for="agreeCheckbox"></label> 
 
    </div> 
 
    </section> 
 
</div> 
 

 
<div style="padding-top:100px;"> 
 
    <section title=".agreeCheckbox"> 
 
    <div class="agreeCheckbox"> 
 
     <input type="checkbox" value="None" id="agreeCheckbox" name="agreeCheckbox" unchecked onchange="toggleLink(this);"/> 
 
     <label for="agreeCheckbox"></label> 
 
    </div> 
 
    </section> 
 
</div> 
 

 
<p> 
 
    <a href="exmaple.com" id="agreeLink" style="display:none;">Jetzt bewerben!</a> 
 
    <a href="none.com" id="dontagreeLink" style="display:inline;">Jetzt bewerben!</a> 
 
</p>

Vielen Dank im Voraus zeigen.

Answer 1

Hier können Sie mit einer Lösung, die Sie

$('input[type="checkbox"]').change(function(){ 
 

 
    var checkboxCnt = 0; 
 
    $('input[type="checkbox"]').each(function(){ 
 
    if($(this).is(':checked')) 
 
     checkboxCnt++; 
 
    }); 
 
    
 
    $('p').find('a').hide(); 
 

 
    if(checkboxCnt != 3){ 
 
    $('p').find('a#agreeLink').show(); 
 
    } else { 
 
    $('p').find('a#dontagreeLink').show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <section title=".agreeCheckbox"> 
 
    <div class="agreeCheckbox"> 
 
     <input type="checkbox" value="None" id="agreeCheckbox1" name="agreeCheckbox" unchecked /> 
 
     <label for="agreeCheckbox"></label> 
 
    </div> 
 
    </section> 
 
</div> 
 

 
<div style="padding-top:100px;"> 
 
    <section title=".agreeCheckbox"> 
 
    <div class="agreeCheckbox"> 
 
     <input type="checkbox" value="None" id="agreeCheckbox" name="agreeCheckbox" unchecked /> 
 
     <label for="agreeCheckbox"></label> 
 
    </div> 
 
    </section> 
 
</div> 
 

 
<div style="padding-top:100px;"> 
 
    <section title=".agreeCheckbox"> 
 
    <div class="agreeCheckbox"> 
 
     <input type="checkbox" value="None" id="agreeCheckbox" name="agreeCheckbox" unchecked /> 
 
     <label for="agreeCheckbox"></label> 
 
    </div> 
 
    </section> 
 
</div> 
 

 
<p> 
 
    <a href="exmaple.com" id="agreeLink" style="display:none;">Jetzt bewerben 1!</a> 
 
    <a href="none.com" id="dontagreeLink" style="display:none;">Jetzt bewerben 2!</a> 
 
</p>

Hoffnung gehen diese

Answer 2

Jede Option wird ein name Attribut benötigen:

if ($('input[name="checkbox1"]:checked') && $('input[name="checkbox2"]:checked') && $('input[name="checkbox3"]:checked')) { 
       //do stuff 
      }