[英]Checkbox input not checking when clicked (CSS toggle switch styling)
我正在使用自定義CSS切換開關來設置復選框輸入的樣式。 GitHub項目
但是,當您單擊復選框切換之一時,它將注冊兩次單擊,並且永遠不會更改選中的值。 如果該復選框以未選中狀態開始,則將保持未選中狀態。 如果開始時未選中,它將保持選中狀態。
我做了一個小提琴來演示這個問題: https : //jsfiddle.net/w1ug4jdc/
樣式復選框的HTML如下所示:
<label class="switch-light switch-candy" onclick="doSomething($(this));">
<input type="checkbox" />
<strong>
Wireless
</strong>
<span>
<span>Off</span>
<span>On</span>
<a></a>
</span>
</label>
這是完成所有樣式設置的CSS文件: https : //github.com/ghinda/css-toggle-switch/blob/master/dist/toggle-switch.css
將
.prop()
而不是.attr()
用於checked
狀態,因為checked
是元素的屬性,請勿使用內聯事件綁定。
另請參閱.prop()與.attr()
嘗試這個:
$('.switch-light.switch-candy').on('click', function() { $('#updates').append('<p>checked=' + $(this).find('input').prop('checked') + '</p>'); })
<link href="https://merkd.com/engine/ui/themes/lux/assets/css/toggle-switch.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <label class="switch-light switch-candy"> <input type="checkbox" /> <strong> Wireless </strong> <span> <span>Off</span> <span>On</span> <a></a> </span> </label> <div id="updates"></div>
要在輸入元素上綁定事件並獲取輸入特定值:
$('.switch-light.switch-candy input').on('click', function() { $('#updates').append('<p>checked=' + this.checked + '</p>'); })
<link href="https://merkd.com/engine/ui/themes/lux/assets/css/toggle-switch.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <label class="switch-light switch-candy"> <input type="checkbox" /> <strong> Wireless </strong> <span> <span>Off</span> <span>On</span> <a></a> </span> </label> <div id="updates"></div>
將onclick事件附加到輸入而不是標簽上: https://jsfiddle.net/w1ug4jdc/1/
: https://jsfiddle.net/w1ug4jdc/1/
<input type="checkbox" onclick="$('#updates').append('<p>checked='+$(this).find('input').attr('checked')+'</p>');" />
(但如上所述,請勿使用內聯事件)
看來jQuery沒有讀取“ checked”屬性。
嘗試使用:checked選擇器
$("label").click(function(){ $('#updates') .append('<p>checked='+$(this).find(':checkbox').is(':checked')+'</p>'); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label onclick=""> <input type="checkbox" /> </label> <div id="updates"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.