[英]Select and Focus a Checkbox Input using Javascript
我有一個復選框 ,它是從php自動生成的,用於根據狀態過濾掉搜索結果。 另外,用戶也可以選擇地區以過濾出結果。 萬一一個人選擇一個特定的地區而不是州,我想使用JavaScript為該地區自動選擇正確的州並能夠集中精力。 我如何使用JavaScript代碼選擇任何復選框並使用JavaScript 專注於它? 非常感謝您的協助。
<li class="cp_state">
<label class="title">State</label>
<div class="handle close dashicons-before"></div>
<div class="element">
<div class="scrollbox">
<ol class="checkboxes">
<li><input type="checkbox" name="cp_state[]" value="Johor" /> <label for="cp_state[]">Johor</label></li>
<li><input type="checkbox" name="cp_state[]" value="Kedah" /> <label for="cp_state[]">Kedah</label></li>
<li><input type="checkbox" name="cp_state[]" value="Kelantan" /> <label for="cp_state[]">Kelantan</label></li>
<li><input type="checkbox" name="cp_state[]" value="Wilayah Persekutuan Kuala Lumpur" /> <label for="cp_state[]">Wilayah Persekutuan Kuala Lumpur</label></li>
<li><input type="checkbox" name="cp_state[]" value="Wilayah Persekutuan Labuan" /> <label for="cp_state[]">Wilayah Persekutuan Labuan</label></li>
<li><input type="checkbox" name="cp_state[]" value="Melaka" /> <label for="cp_state[]">Melaka</label></li>
<li><input type="checkbox" name="cp_state[]" value="Negeri Sembilan" /> <label for="cp_state[]">Negeri Sembilan</label></li>
<li><input type="checkbox" name="cp_state[]" value="Pahang" /> <label for="cp_state[]">Pahang</label></li>
<li><input type="checkbox" name="cp_state[]" value="Wilayah Persekutuan Putra Jaya" /> <label for="cp_state[]">Wilayah Persekutuan Putra Jaya</label></li>
<li><input type="checkbox" name="cp_state[]" value="Perlis" /> <label for="cp_state[]">Perlis</label></li>
<li><input type="checkbox" name="cp_state[]" value="Pulau Pinang" /> <label for="cp_state[]">Pulau Pinang</label></li>
<li><input type="checkbox" name="cp_state[]" value="Perak" /> <label for="cp_state[]">Perak</label></li>
<li><input type="checkbox" name="cp_state[]" value="Sabah" /> <label for="cp_state[]">Sabah</label></li>
<li><input type="checkbox" name="cp_state[]" value="Selangor" /> <label for="cp_state[]">Selangor</label></li>
<li><input type="checkbox" name="cp_state[]" value="Sarawak" /> <label for="cp_state[]">Sarawak</label></li>
<li><input type="checkbox" name="cp_state[]" value="Terengganu" /> <label for="cp_state[]">Terengganu</label></li>
</ol> <!-- #checkbox-wrap -->
</div> <!-- #end scrollbox -->
</div> <!-- #end element -->
<div class="clr"></div>
</li>
當用戶選擇地區時,您需要知道您要尋找的州。 有了它,您可以編寫簡單的函數,該函數在一組復選框上進行迭代,並根據提供的值選擇特定的復選框。 每次用戶選擇區域時,您都需要調用切換復選框的功能。 像這樣:
var checkboxes = document.querySelectorAll('input[type="checkbox"]')
function selectCheckboxWithValue(value) {
checkboxes.forEach(function(checkbox) {
if (checkbox.value === value) {
checkbox.checked = true
checkbox.focus()
} else {
checkbox.checked = false
}
})
}
// let's find checkbox with value "Kedah", select it and focus
selectCheckboxWithValue('Kedah')
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.