2017-08-24 1 views
-2

ich einige benutzerdefinierte Kontrollkästchen von http://doodlenerd.com/html-control/css-checkbox-generator erzeugt bin mitJQuery CSS Checkbox nicht Detektieren geprüft

$(".button").click(function() { 
 
    if(document.getElementById('terms_checkbox').checked) { 
 
    alert('I am checked'); 
 
    } else { 
 
    alert('I am not checked'); 
 
    } 
 
});
.button{ 
 
background:red; 
 
width:200px 
 
height:100px; 
 
} 
 

 
.control { 
 
    font-family: arial; 
 
    display: block; 
 
    position: relative; 
 
    padding-left: 30px; 
 
    margin-bottom: 15px; 
 
    padding-top: 3px; 
 
    cursor: pointer; 
 
    font-size: 16px; 
 
} 
 
    .control input { 
 
     position: absolute; 
 
     z-index: -1; 
 
     opacity: 0; 
 
    } 
 
.control_indicator { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0; 
 
    height: 30px; 
 
    width: 35px; 
 
    background: #efe8d9; 
 
    border: 1px solid #000000; 
 
} 
 
.control-radio .control_indicator { 
 
    border-radius: undefined%; 
 
} 
 

 
.control:hover input ~ .control_indicator, 
 
.control input:focus ~ .control_indicator { 
 
    background: #efe8d9; 
 
} 
 

 
.control input:checked ~ .control_indicator { 
 
    background: #EFE8D9; 
 
} 
 
.control:hover input:not([disabled]):checked ~ .control_indicator, 
 
.control input:checked:focus ~ .control_indicator { 
 
    background: #efe8d9; 
 
} 
 
.control input:disabled ~ .control_indicator { 
 
    background: #e6e6e6; 
 
    opacity: 0.6; 
 
    pointer-events: none; 
 
} 
 
.control_indicator:after { 
 
    box-sizing: unset; 
 
    content: ''; 
 
    position: absolute; 
 
    display: none; 
 
} 
 
.control input:checked ~ .control_indicator:after { 
 
    display: block; 
 
} 
 
.control-checkbox .control_indicator:after { 
 
    left: 10px; 
 
    top: 2px; 
 
    width: 11px; 
 
    height: 17px; 
 
    border: solid #000000; 
 
    border-width: 0 2px 2px 0; 
 
    transform: rotate(45deg); 
 
} 
 
.control-checkbox input:disabled ~ .control_indicator:after { 
 
    border-color: #7b7b7b; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="control-group"> 
 
    <label class="control control-checkbox"> 
 
     First checkbox 
 
      <input type="checkbox" /> 
 
     <div class="control_indicator"></div> 
 
    </label> 
 
</div> 
 

 
<div class="button"> 
 
Click Me 
 
</div>

Wenn ich auf die Schaltfläche klicken, um es nicht erkennt, dass das Kontrollkästchen aktiviert ist, wo soll ich nur falsch?

+1

_ „Wohin gehe ich falsch?“ Verwenden können _ - Sie die Existenz der Browser-Konsole ignoriert. Also schau zuerst mal hin. – CBroe

+0

Abstimmung zum Schließen als Tippfehler/Nichtwiederholung. –

Antwort

2

Ihr html <input/> fehlt die ID, die das JavaScript benötigt. Es sollte <input type="checkbox" id='terms_checkbox'/> sein

Versuchen Sie, das folgende Schnipsel auszuführen.

$(document).ready(function() { 
 
    $(".button").click(function() { 
 
    if (document.getElementById('terms_checkbox').checked) { 
 
     alert('I am checked'); 
 
    } else { 
 
     alert('I am not checked'); 
 
    } 
 
    }); 
 
})
.button { 
 
    background: red; 
 
    width: 200px height:100px; 
 
} 
 

 
.control { 
 
    font-family: arial; 
 
    display: block; 
 
    position: relative; 
 
    padding-left: 42px; 
 
    margin-bottom: 15px; 
 
    padding-top: 3px; 
 
    cursor: pointer; 
 
    font-size: 16px; 
 
} 
 

 
.control input { 
 
    position: absolute; 
 
    z-index: -1; 
 
    opacity: 0; 
 
} 
 

 
.control_indicator { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0; 
 
    height: 30px; 
 
    width: 35px; 
 
    background: #efe8d9; 
 
    border: 1px solid #000000; 
 
} 
 

 
.control-radio .control_indicator { 
 
    border-radius: undefined%; 
 
} 
 

 
.control:hover input~.control_indicator, 
 
.control input:focus~.control_indicator { 
 
    background: #efe8d9; 
 
} 
 

 
.control input:checked~.control_indicator { 
 
    background: #EFE8D9; 
 
} 
 

 
.control:hover input:not([disabled]):checked~.control_indicator, 
 
.control input:checked:focus~.control_indicator { 
 
    background: #efe8d9; 
 
} 
 

 
.control input:disabled~.control_indicator { 
 
    background: #e6e6e6; 
 
    opacity: 0.6; 
 
    pointer-events: none; 
 
} 
 

 
.control_indicator:after { 
 
    box-sizing: unset; 
 
    content: ''; 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
.control input:checked~.control_indicator:after { 
 
    display: block; 
 
} 
 

 
.control-checkbox .control_indicator:after { 
 
    left: 10px; 
 
    top: 2px; 
 
    width: 11px; 
 
    height: 17px; 
 
    border: solid #000000; 
 
    border-width: 0 2px 2px 0; 
 
    transform: rotate(45deg); 
 
} 
 

 
.control-checkbox input:disabled~.control_indicator:after { 
 
    border-color: #7b7b7b; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="control-group"> 
 
    <label class="control control-checkbox"> 
 
    First checkbox 
 
    <input type="checkbox" id='terms_checkbox'/> 
 
    <div class="control_indicator"></div> 
 
    </label> 
 
</div> 
 

 
<div class="button">Click Me</div>

Auch würde ich sicherstellen, dass mit $(document).ready Ihre JQuery wickeln, um sicherzustellen, dass der Inhalt auf das DOM geladen wurde:

hier mehrere Dinge
0

. Sie wählen Ihre Checkbox nicht aus. Es gibt kein Element mit der ID terms_checkbox. Nach, wenn Sie Jquery verwenden, verwenden Sie es für jede Auswahl nicht JS/Jquery ist es besser.

Und für die Immobilie erhalten checked Sie prop() oder attr() oder is()

$(".button").click(function() { 
 
    if($(".control-checkbox").find("input[type='checkbox']").prop("checked")) { 
 
    alert('I am checked'); 
 
    } else { 
 
    alert('I am not checked'); 
 
    } 
 
});
.button{ 
 
background:red; 
 
width:200px 
 
height:100px; 
 
} 
 

 
.control { 
 
    font-family: arial; 
 
    display: block; 
 
    position: relative; 
 
    padding-left: 30px; 
 
    margin-bottom: 15px; 
 
    padding-top: 3px; 
 
    cursor: pointer; 
 
    font-size: 16px; 
 
} 
 
    .control input { 
 
     position: absolute; 
 
     z-index: -1; 
 
     opacity: 0; 
 
    } 
 
.control_indicator { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0; 
 
    height: 30px; 
 
    width: 35px; 
 
    background: #efe8d9; 
 
    border: 1px solid #000000; 
 
} 
 
.control-radio .control_indicator { 
 
    border-radius: undefined%; 
 
} 
 

 
.control:hover input ~ .control_indicator, 
 
.control input:focus ~ .control_indicator { 
 
    background: #efe8d9; 
 
} 
 

 
.control input:checked ~ .control_indicator { 
 
    background: #EFE8D9; 
 
} 
 
.control:hover input:not([disabled]):checked ~ .control_indicator, 
 
.control input:checked:focus ~ .control_indicator { 
 
    background: #efe8d9; 
 
} 
 
.control input:disabled ~ .control_indicator { 
 
    background: #e6e6e6; 
 
    opacity: 0.6; 
 
    pointer-events: none; 
 
} 
 
.control_indicator:after { 
 
    box-sizing: unset; 
 
    content: ''; 
 
    position: absolute; 
 
    display: none; 
 
} 
 
.control input:checked ~ .control_indicator:after { 
 
    display: block; 
 
} 
 
.control-checkbox .control_indicator:after { 
 
    left: 10px; 
 
    top: 2px; 
 
    width: 11px; 
 
    height: 17px; 
 
    border: solid #000000; 
 
    border-width: 0 2px 2px 0; 
 
    transform: rotate(45deg); 
 
} 
 
.control-checkbox input:disabled ~ .control_indicator:after { 
 
    border-color: #7b7b7b; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="control-group"> 
 
    <label class="control control-checkbox"> 
 
     First checkbox 
 
      <input type="checkbox" /> 
 
     <div class="control_indicator"></div> 
 
    </label> 
 
</div> 
 

 
<div class="button"> 
 
Click Me 
 
</div>

Verwandte Themen