2017-08-24 30 views
-2

我使用產生了一些自定義的複選框按http://doodlenerd.com/html-control/css-checkbox-generatorJquery的CSS複選框未檢測檢查

$(".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>

當我點擊它沒有認識到複選框被選中,我要去哪裏按鈕錯誤?

+1

_「我要去哪裏錯了嗎?」 _ - 你忽略瀏覽器控制檯的存在。所以先去看看那裏。 – CBroe

+0

投票結束爲拼寫錯誤/無法複製。 –

回答

2

您的html <input/>缺少JavaScript需要的id。它應該是<input type="checkbox" id='terms_checkbox'/>

嘗試運行下面的代碼段。

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

而且我會確保包裹你的JQuery與$(document).ready以確保內容已被加載到DOM:

0

多在這裏的事情。你沒有選擇你的複選框。有沒有編號爲terms_checkbox的元素。 如果你使用的是Jquery,那麼每個選擇都使用它,而不是JS/Jquery,這會更好。

而對於獲得checked您可以使用屬性prop()attr()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>