I would like to have the possibility with javascript to deselect checkbox "demo2" when I deselect checkbox "demo1".
only deselect
<input type="checkbox" name="demo1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="demo2" value="Car">
<label for="vehicle2"> I have a car</label><br>
I gues you just want to have "radio" like behaviour.
You can see below how it can be done with pure JS.
<html>
<body>
<script>
function switcher(obj) {
if(obj.checked == true) {
document.getElementsByName('demo2')[0].checked = false;
document.getElementsByName('demo1')[0].checked = false;
obj.checked= true
}
}
</script>
<input type="checkbox" name="demo1" value="Bike" onclick="switcher(this)">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="demo2" value="Car" onclick="switcher(this)">
<label for="vehicle2"> I have a car</label><br>
</body>
</html>
Related
This code should prohibit clicking more than two radiobuttons in total (there are three groups of such buttons).
This works when there is no container 'label', but when it is, it doesn't work (it looks like that 'if' construct is not working; everything that is written outside of it works fine)
how to make it work without removing the label? Is there any solutions?
var radio_limit = 2;
$('.pricing-levels-3 label input').on('change', function(evt) {
if($(this).siblings(':checked').length >= radio_limit) {
this.checked = false;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pricing-levels-3">
<p><strong>Select 2 Levels</strong></p>
<label>
<input type="radio" name="vehicle" value="1">Level 1<br>
<input type="radio" name="vehicle" value="2">Level 2<br>
<input type="radio" name="vehicle" value="3">Level 3<br>
</label>
<label>
<br>
<input type="radio" name="vehicle2" value="1">Level 1<br>
<input type="radio" name="vehicle2" value="2">Level 2<br>
<input type="radio" name="vehicle2" value="3">Level 3<br>
</label>
<label>
<br>
<input type="radio" name="vehicle3" value="1">Level 1<br>
<input type="radio" name="vehicle3" value="2">Level 2<br>
<input type="radio" name="vehicle3" value="3">Level 3<br>
<br>
</label>
</div>
You are looking for siblings, which they were without labels. Now with labels they are not sibling they are cousins. To fix we read all radio buttons in same div using closest(). Also use prop to check a radio button. Do this:
var radio_limit = 2;
$('.pricing-levels-3 label input').on('change', function(evt) {
if($(this).closest('div').find('input:checked').length >= radio_limit) {
$(this).prop('checked', false);
};
});
I have multiple checkboxes that are added with AJAX. I am trying to trigger a click if the checkbox is not checked, but this is not working for all the checkboxes.
if ($(".variable_manage_stock").prop('checked') == false) {
$('.variable_manage_stock').trigger('click');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[0]">
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[1]">
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[2]">
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[3]">
You can loop through the list that you are getting by $(".variable_manage_stock") as the following code does:
var stockList = $(".variable_manage_stock");
stockList.each(function() {
if ($(this).prop('checked') == false) {
$(this).trigger('click');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[0]">
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[1]">
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[2]">
<input type="checkbox" class="variable_manage_stock" name="variable_manage_stock[3]">
I have multiple checkbox i want to disable other checkbox(i.e Student, Parent, Faculty) if i select All but if I select Student or others the All checkbox only will be disabled
<input type="checkbox" name="scope[]" value="All">ALL</input>
<input type="checkbox" name="scope[]" value="Student">Student</input>
<input type="checkbox" name="scope[]" value="Parent">Parent</input>
<input type="checkbox" name="scope[]" value="Faculty">Faculty</input>
<input type="checkbox" name="scope[]" value="Others">Others</input>
You can use same name but different ID's to disable your checkbox
<input type="checkbox" name="scope[]" value="All" id="all">ALL</input>
<input type="checkbox" name="scope[]" value="Student" id="student">Student</input>
<input type="checkbox" name="scope[]" value="Parent" id="Parent">Parent</input>
<input type="checkbox" name="scope[]" value="Faculty" id="Faculty">Faculty</input>
<input type="checkbox" name="scope[]" value="Others" id="others">Others</input>
and you can use JavaScript to disable checkbox.
document.getElementById("others").disabled = true;
When click at id"t1", id"t2" and id"t3" changes to id"t1"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="t1" onchange="check_all()" checked>
<input type="checkbox" id="t2" checked>
<input type="checkbox" id="t3" checked>
<script>
function check_all() {
if (document.getElementById('t1').checked == true) {
$(".t2").prop("checked", true);
$(".t3").prop("checked", true);
} else {
$(".t2").prop("checked", false);
$(".t3").prop("checked", false);
}
}
</script>
The problem is due to missing # before the id selector int can be fixed by adding # instead of . in your selector. Anyways you can make it simpler by combining both the selector into one and the if condition can be replaced by using checked property value as the argument in prop() method.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="t1" checked>
<input type="checkbox" id="t2" checked>
<input type="checkbox" id="t3" checked>
<script>
// bind change event handler or use inline onchange
// where pass the reference(this) as argument
$('#t1').change(function() {
// get both element and update property based on the
// current value of t1 checkbox
$('#t2,#t3').prop('checked', this.checked);
})
</script>
Typo: Id define by # in dom .you are adding . is define as a class
function check_all() {
if (document.getElementById('t1').checked == true) {
$("#t2").prop("checked", true);
$("#t3").prop("checked", true);
} else {
$("#t2").prop("checked", false);
$("#t3").prop("checked", false);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="t1" onchange="check_all()" checked>
<input type="checkbox" id="t2" checked>
<input type="checkbox" id="t3" checked>
For more simplified version Do like this
function check_all() {
$("#t2,#t3").prop("checked", $('#t1').is(':checked'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="t1" onchange="check_all()" checked>
<input type="checkbox" id="t2" checked>
<input type="checkbox" id="t3" checked>
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<p><label><input type="checkbox" id="checkAll"/> Check all</label></p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p><label><input type="checkbox" /> Option 1</label></p>
<p><label><input type="checkbox" /> Option 2</label></p>
<p><label><input type="checkbox" /> Option 3</label></p>
<p><label><input type="checkbox" /> Option 4</label></p>
</fieldset>
</form>
I have an 4 input checkbox tag, and 1 div tag to display a price if one checkbox is checked
<input type="checkbox" value="None" id="check1" />
<input type="checkbox" value="None" id="check2" />
<input type="checkbox" value="None" id="check3" />
<input type="checkbox" value="None" id="check4" />
<div id="price"></div>
What i want to do if only 1 random checkbox is checked it will display number 1,800 on div#price, but if 2 checkbox is checked it will summed become 3,600 and so on until 4 checkbox. But i really confused how to do that using jQuery. Any idea?
Use :checkbox selector to assign change event on all thre type = checkbox elements, one can add [value="None"] while selecing checkbox elements to be more specific.
Use :checkbox:checked selector to select the checked checkboxes.
var val = 1800;
$(':checkbox[value="None"]').on('change', function() {
var len = $(':checkbox:checked').length;
$('#price').text(len * val);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" value="None" id="check1" />
<input type="checkbox" value="None" id="check2" />
<input type="checkbox" value="None" id="check3" />
<input type="checkbox" value="None" id="check4" />
<div id="price"></div>
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<input type="checkbox" value="100" id="check1" />
<input type="checkbox" value="21" id="check2" />
<input type="checkbox" value="22" id="check3" />
<input type="checkbox" value="4" id="check4" />
<div id="price"></div>
JAVASCRIPT
var price=0;
$(':checkbox').on('change', function() {
var len = parseInt(this.value);
if($(this).is(':checked')){
price+=len;
}else{
price-=len;
}
console.log(price)
$('#price').text(price);
});
JSBIN
JSBIN-URL