ok, I have a set of 3 divs which are toggled to show/hide based on a checkbox selection, my issue is I only want one checkbox at a time to be selected
This is the checkbox used to toggle
<input onClick="toggle('village');" type="checkbox" style="transform: scale(1.5);"><label> Only Villages</label>
This is the code that toggles the divs
function toggle(matchingAttribute) {
// optain all div elements in the page
var divArray = document.getElementsByTagName("div");
for(i=divArray.length-1; i>=0; i--) { // for each div
if(divArray[i].id.match("_"+matchingAttribute+"_")) {
if(divArray[i].style.display != 'none') {
divArray[i].style.display = 'none';
}
else {
divArray[i].style.display = '';
}
}
}
}
Any help gratefully received
at first unchecked all checkbox then checked this checkbox
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = false;
}
}
this.checked = true;
I've created a JSFiddle for you as an example, which fulfills what your requirement is.
Script:
$('input[type="checkbox"]').click(function(){
var inputValue = $(this).attr("value");
if (this.checked)
{
$('input:checkbox').removeAttr('checked');
$(".red").hide();
$(".green").hide();
$(".blue").hide();
$("." + inputValue).show();
$(this).prop("checked", true);
}
else
{
$(".red").hide();
$(".green").hide();
$(".blue").hide();
}
});
HTML:
<div>
<label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
<label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
<label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
</div>
<div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
<div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
Do let me know if you need anything else.
Hope it helps :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.