I have 3 checkbox, for which I want only 1 checkbox to be checked at a time. below is my fiddle for the html
JS fiddle
I want this to be worked in IE8 also kindly suggest how to do
How about this - fiddle:
<input type="checkbox" class="chk" />
<input type="checkbox" class="chk" />
<input type="checkbox" class="chk" />
<input type="checkbox" class="chk" />
$('input.chk').on('change', function() {
$('input.chk').not(this).prop('checked', false);
});
Edit:
for second part of your question to un-check other checkboxes when selecting parent checkbox see this fiddle - (as per chat) :
if (!cb.checked) {
$('#trchkOptions input[type=checkbox]').attr('checked', false);
}
function selectOnlyThis(id) {
for (var i = 1;i <= 4; i++)
{
document.getElementById(i).checked = false;
}
document.getElementById(id).checked = true;
}
<input type="checkbox" id="1" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 1
<input type="checkbox" id="2" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 2
<input type="checkbox" id="3" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 3
<input type="checkbox" id="4" value="Value1" onclick="selectOnlyThis(this.id)" /> Option 4
It should help you
Related
Array.prototype.shuffle = function() {
let m = this.length, i;
while (m) {
i = (Math.random() * m--) >>> 0;
[this[m], this[i]] = [this[i], this[m]]
}
return this;
}
$('#select_random').on('click', function() {
if ($(this).prop('checked')) {
let minnum = 3, maxnum = 6
let rand = Math.min(maxnum, Math.floor(Math.random() * ($('.check').length - 1 - minnum)) + minnum)
//create our keys array
let keyArray = [...Array($('.check').length).keys()].shuffle().slice(0, rand)
keyArray.forEach((chk_i, i) => {
if (i < rand) $($('.check').get(chk_i)).prop('checked', true)
})
} else {
$('.check').prop('checked', false);
}
});
const selectedElm = document.getElementById('selected');
function showChecked(){
selectedElm.innerHTML = document.querySelectorAll('input[name=check]:checked').length;
}
document.querySelectorAll("input[name=check]").forEach(i=>{
i.onclick = () => showChecked();
});
Using this script to select random amount of checkboxes in table.
Want to show count number of selected checkboxes count.
Tried some sample not working. Tried this example, not working for me. Tring to get result in div span area like below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Select Random <input type='checkbox' id="select_random"></label>
<div id="result">Total Number of Items Selected = <span id="selected">0</span></div>
<div class='cb'>
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
<input type="checkbox" name="check[]" class="check"> checkbox <br />
Solution
let checked = $(".check:checked");
in your case :
$(".check:checked").length // will return count of checked checkboxes;
i hope it was useful
Here is a code snippet showing how to count checked checkboxes. If I have misunderstood your problem, let me/us know and I will either alter or delete this answer
console.log(document.querySelectorAll("input:checked").length);
1<input type="checkbox" checked/>
2<input type="checkbox" checked/>
3<input type="checkbox"/>
4<input type="checkbox" checked/>
Here is one possible solution
const checkboxContainer = document.querySelector('.cb');
function showChecked(){
selectedElm.innerHTML = checkboxContainer.querySelectorAll('input[type=checkbox]:checked').length;
}
You want to limit the search to a parent container tag and also filter out by input type.
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
<input type="checkbox" name="checkbox" id="checkbox1" value="10" /> Value 1
<input type="checkbox" name="checkbox" id="checkbox2" value="20" /> value 2
<input type="checkbox" name="checkbox" id="checkbox3" value="30" /> value 3
<input type="checkbox" name="checkbox" id="checkbox4" value="40" /> value 4
<input type="checkbox" name="checkbox" id="checkbox5" value="50" /> value 5
Ect, etc. I want the add value of selected checkboxes in a text field and all selected checkbox value in a diffrent diffrent checkboxes.
Using this code for the adding of checkboxes but dont know how to get the name of the check box as well as dynamic. For example value 1 , value 2, value 3 in a textbox in front of checkbox in a hidden form.
Code of adding is given below.
$(document).ready(function () {
$("#textfield2").val( $("#textfield").val());
$('.priceAdded input[type="checkbox"]').on("change", function () {
var priceAdded = $("#textfield").val();
$('.priceAdded input[type="checkbox"]').each(function () {
if ($(this).is(":checked")) {
priceAdded = parseFloat(priceAdded) + parseFloat($(this).val());
}
$("#textfield2").val(priceAdded);
});
});
return false;
});
If you're wanting to get the id of the checkboxes and a total of the selected values
http://jsfiddle.net/hb0hhbk4/1/
HTML
<input type="checkbox" name="checkbox" id="checkbox1" value="10" class='sum' />Value 1
<input type="checkbox" name="checkbox" id="checkbox2" value="20" class='sum' />value 2
<input type="checkbox" name="checkbox" id="checkbox3" value="30" class='sum' />value 3
<input type="checkbox" name="checkbox" id="checkbox4" value="40" class='sum' />value 4
<input type="checkbox" name="checkbox" id="checkbox5" value="50" class='sum' />value 5
<input id='textfield1' type='text' />
<input id='textfield2' type='text' />
JS
$("input[type='checkbox'].sum").on('click', function () {
var total = 0;
var ids = [];
$("input[type='checkbox'].sum:checked").each(function () {
var value = parseInt($(this).val());
total += value;
ids.push($(this).attr('id'));
});
ids = ids.join(" ", ids);
$('#textfield1').val(ids);
$('#textfield2').val(total);
});
If you're looking for the LABEL near the checkbox, you need to do something like this
<span><input type="checkbox" name="checkbox" id="checkbox1" value="10" /> Value 1</span>
<span><input type="checkbox" name="checkbox" id="checkbox2" value="20" /> value 2</span>
<span><input type="checkbox" name="checkbox" id="checkbox3" value="30" /> value 3</span>
<span><input type="checkbox" name="checkbox" id="checkbox4" value="40" /> value 4</span>
<span><input type="checkbox" name="checkbox" id="checkbox5" value="50" /> value 5</span>
And inside the each function you can access the label with
$( this ).closest( "span" ).text();
Using that layout, you probably won't be able to, because there's no way of isolating "value 1", for example, from the rest of the code (it isn't the content of an element, or an attribute of anything.
You could put the "Value 1/2/3/4" text in something like a span and then you can use the adjacent selector in Jquery. for example::
<input type="checkbox" name="checkbox" id="checkbox1" value="10" /> <span>Value 1</span>
Then use
$(this).next().text();
To get the contents of the span directly after the checkbox that's just been clicked.
I need check-boxes list that has one quality of radio-buttons:
That you can check only one of them.
I don't want to use radio-buttons, becouse I need other qualities of check-boxes, like that you can un-check it by additional click.
Is there any simple way to do it?
I can use javascript, including knockout and jquery libraries.
DEMO
$(function() {
$(':checkbox').on('change',function() {
$(':checkbox[name=' + this.name + ']:checked').not(this).prop('checked',false);
});
});
HTML:
<fieldset>
<legend>Group1</legend>
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
<input type="checkbox" class="radio" value="1" name="fooby[1][]" />
</fieldset>
<fieldset>
<legend>Group2</legend>
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
<input type="checkbox" class="radio" value="1" name="fooby[2][]" />
</fieldset>
Checkbox Group exactly like a radio button group
jsfiddle:
Checkbox Group
Javascript:
$("input:checkbox").click(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).attr("checked",false);
$(this).attr("checked",true);
});
Checkbox Group you can remove all checked.
jsfiddle:
Checkbox Group(can remove all checked)
Javascript:
$("input:checkbox").change(function(){
var group = "input:checkbox[name='"+$(this).attr("name")+"']";
$(group).not(this).prop("checked",false);
$(this).prop("checked",!this.checked);
});
I have a few radio buttons, and when I select one of them, I also have to check another one.
For example, if I select yes on a radio button, another radio button must be automatically checked with no.
I tried a few scripts but don't seem to work.
Does anyone know a solution? I'm new in JS.
Thanks in advance!
> Live Demo <
<!--HTML-->
<input type="radio" name="group_1" value="yes" id="r1">Yes<br>
<input type="radio" name="group_1" value="no" id="r2">No<br>
<br>
<input type="radio" name="group_2" value="yes" id="r3">Yes<br>
<input type="radio" name="group_2" value="no" id="r4">No<br>
//Script
$("input[name='group_1']").click(function(){
if(this.value=="yes"){
$("input#r4").attr("checked",true);
}else{
$("input#r3").attr("checked",true);
}
});
$("input[name='group_2']").click(function(){
if(this.value=="yes"){
$("input#r2").attr("checked",true);
}else{
$("input#r1").attr("checked",true);
}
});
I'm not very certain on what you are trying to achieve but by using the "name" attribute this automatically happens...when you check one radio...the others with the same name get set to unchecked.
<input type="radio" name="someoption" value="0" />0
<input type="radio" name="someoption" value="1" />1
<input type="radio" name="someoption" value="2" />2
checking any one of the above will cause the other 2 to be unchecked
unless do you may be mean checkboxes or multiple option sets ?
javascript:
$('#myradio1').bind('change', function () {
$('#myradio3').attr('checked', 'checked');
});
html
<input type="radio" name="cols1" value="1" id="myradio1" />
<input type="radio" name="cols1" value="2" id="myradio2" />
<input type="radio" name="cols2" value="1" id="myradio3" />
<input type="radio" name="cols2" value="2" id="myradio4" />
see working example at http://jsfiddle.net/9jXbv/
For HTML markup like below:
<div>
<input type="radio" name="one" value="yes"> yes
<input type="radio" name="one" value="no"> no
</div>
<div>
<input type="radio" name="two" value="yes"> yes
<input type="radio" name="two" value="no"> no
</div>
you can use this JavaScript code:
$(":radio").on("change", function() {
var that = this;
$(":radio").filter(function() {
return this.value == "no" && this.name != that.name;
}).prop("checked", true);
});
DEMO: http://jsfiddle.net/nKLMX/
With jquery:
$("#radio1").change(function() {
$("#radio2").removeAttr("checked");
});
http://jsfiddle.net/
I've mocked up a pure JS solution to this ( No libraries )
<input type="radio" name="g1" value="1" />Yes
<br />
<input type="radio" name="g1" value="0" />No
<br /><br />
<input type="radio" name="g2" value="1" />Yes
<br />
<input type="radio" name="g2" value="0" />No
<script type="text/javascript">
var g1 = document.getElementsByName('g1'); // store g1 elements
var g2 = document.getElementsByName('g2'); // store g2 elements
// handle click functionality
function radio_checked_event(obj, f) {
if(obj.addEventListener) {
obj.addEventListener('click', f, false);
} else if(obj.attachEvent) {
obj.attachEvent('onclick', f);
}
}
// when you click on g1 yes
radio_checked_event(g1[0], function() {
//set g1 no to checked
g2[1].setAttribute('checked', 'checked');
});
</script>