Check if checkbox with specific id is checked JQuery - javascript

Please help me how to identify if a checkbox with specific id is checked/unchecked.
<input name="A" id="test" type="checkbox" value="A" />
<input name="B" id="test" type="checkbox" value="B" />
<input name="C" id="test1" type="checkbox" value="C" />
<input name="C" id="test1" type="checkbox" value="D" />
If i check the checkbox with id="test" and name="a", then the event should fire and otherwise it should not for rest of the checkbox with different id other than "test"
Please help

Since you tag JQuery you can find it helpful
AAA <input type="checkbox" id="test" />
BBB <input type="checkbox" id="test1" />
CCC <input type="checkbox" id="test2" />
and
$( "input" ).on( "click", function() {
// for a specific one, but you can add a foreach cycle if you need more
if($('#test').is(":checked")){
alert('is checked!');
}else {
alert('is NOT checked!');
}
});

Element IDs in a given document must be unique! Hence, change your HTML to something like below and take a look at the script.
$(function() {
$(":checkbox").on("change", function() {
//When the id is test1
//And name is A
//And it's checked
if (this.id === "test1" && this["name"] === "A" && this.checked) {
alert ("Checkbox with name A and ID test1 is checked");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="A" id="test1" type="checkbox" value="A" />
<input name="B" id="test2" type="checkbox" value="B" />
<input name="C" id="test3" type="checkbox" value="C" />
<input name="C" id="test4" type="checkbox" value="D" />

Id's must be Unique.... otherwise when you use document.getElementById();
It will select First occurence of specific Id...
Instead implement like this..
<input name="A" type="checkbox" value="A" />
<input name="B" type="checkbox" value="B" />
<input name="C" type="checkbox" value="C" />
<input name="C" type="checkbox" value="D" />
and trigger a event on click oncheck box and use document.getElementsByName('');

Related

Check only non-disabled

I have a sequence of checkboxes that can be disabled or not through the disabled in the input tag
By clicking on the parent checkbox, I need only those NOT disabled to be checked
Current and desired:
Code so far:
$("#checkAll").click(function () {
$("input:checkbox").not(this).prop("checked", this.checked);
});
You could use the :not() selector combined with the has attribute selector :
$("#checkAll").change(function () {
$("input:checkbox:not([disabled])").prop("checked", this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
As suggested by #connexo, you should use .change() instead of .click(). See this answer for more information.
Vanilla JS, always preferred:
document.getElementById('checkAll').addEventListener('change', function() {
for (const cb of document.querySelectorAll('input[type=checkbox]:not([disabled])')) {
if (cb !== this) cb.checked = this.checked;
}
});
<input type="checkbox" id="checkAll" />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />
<input type="checkbox" disabled />
<input type="checkbox" />

update image with jquery based on multiple radio button inputs

An image is being rendered based on multiple attributes.
The name of the image reflects attribute values (for names a, b, & c).
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>
when a user clicks a radio button (say b_4), the checked input element needs to change and a new image needs to render as
<img src="142_small.jpg" data-zoom-image="142_big.jpg" id="rendered_choice">
How can this be accomplished with jQuery, where the file name takes into account all other checked values in addition to the user inputted value?
Just get the value of each checked checkbox, in order, after making an array with $.makeArray:
$("input[type='radio']").on("change", function() {
const num = $.makeArray($("input:checked")).map(({ value }) => value).join("");
$("#rendered_choice").attr("src", num + "_small.jpg").data("zoom-image", num + "_big.jpg");
});
You can get value of each checked checkbox and change the img src when input checked change.
Demo:
$("input[type=radio]").on("change", function() {
var index = $("input[name=a]:checked").val() + $("input[name=b]:checked").val() + $("input[name=c]:checked").val();
$("#rendered_choice").attr("src", index + "_small.jpg");
$("#rendered_choice").attr("data-zoom-image", index + "_big.jpg");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<img src="112_small.jpg" data-zoom-image="112_big.jpg" id="rendered_choice">
</div>
<div>
<h6>9</h6>
<input type="radio" id="a_1" name="a" value="1" checked="checked" />
<input type="radio" id="a_2" name="a" value="2" />
<input type="radio" id="a_3" name="a" value="3" />
</div>
<div>
<h6>10</h6>
<input type="radio" id="b_1" name="b" value="1" checked="checked" />
<input type="radio" id="b_2" name="b" value="2" />
<input type="radio" id="b_3" name="b" value="3" />
<input type="radio" id="b_4" name="b" value="4" />
<input type="radio" id="b_5" name="b" value="5" />
</div>
<div>
<h6>11</h6>
<input type="radio" id="c_1" name="c" value="1" />
<input type="radio" id="c_2" name="c" value="2" checked="checked" />
</div>

Is there a cleaner way to change attribute on multiple checkboxes?

I have a bunch of checkboxes:
<input type="checkbox" name="foo" value="1" />
<input type="checkbox" name="foo" value="2" />
<input type="checkbox" name="foo" value="3" />
<input type="checkbox" name="foo" value="4" />
<input type="checkbox" name="foo" value="5" />
<input type="checkbox" name="foo" value="6" />
I want to change the checked attribute the ones with values 1, 3 and 5. Is there a cleaner way to provide a selector than below (preferably a one-liner)?
$('[name="foo"][value="1"],[name="foo"][value="3"],[name="foo"][value="4"]').prop({ checked: true }).change();
P.S. Found a better way:
$('[name="foo"]').filter('[value="1"],[value="3"],[value="4"]').prop({ checked: true }).change();
Using prop(propertyName, function) could do something like
var checkVals = [1, 3 , 5];
// Adjust selector to fit needs
$(':checkbox').prop('checked', function(){
return checkVals.indexOf(+this.value) > -1 || this.checked;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="foo" value="1" />
<input type="checkbox" name="foo" value="2" />
<input type="checkbox" name="foo" value="3" />
<input type="checkbox" name="foo" value="4" />
<input type="checkbox" name="foo" value="5" />
<input type="checkbox" name="foo" value="6" />
Or using filter()
var checkVals = [1, 3 , 5];
// Adjust selector to fit needs
$(':checkbox').filter(function() {
return checkVals.indexOf(+this.value) > -1;
}).prop('checked', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="foo" value="1" />
<input type="checkbox" name="foo" value="2" />
<input type="checkbox" name="foo" value="3" />
<input type="checkbox" name="foo" value="4" />
<input type="checkbox" name="foo" value="5" />
<input type="checkbox" name="foo" value="6" />
I suppose if you know the indices you want to check beforehand, you won't have to put them in manually:
$([1, 3, 5].map(x => `[name="foo"][value="${x}"]`).join(",")).prop({ checked: true }).change();
That snippet uses fancy es6 arrow functions and template literals. If you can't use those, it looks a little nastier but still isn't too bad:
$([1, 3, 5].map(function(x) { return '[name="foo"][value="' + x + '"]').join(",")).prop({ checked: true }).change();
Finally, you can even do it without collecting them all in the same selector:
[1,3,5].forEach(x => { $(`[name="foo][value="${x}"]`).prop({ checked: true }).change(); });
Pick your poison I guess.

How to Hide BR after Radio Button & Label are hidden

This answer is about hiding both the radio button and its label, but I also have a BR tag following that I need to hide. Currently, there's a blank line.
hide() radio button *and* its text label in jquery
$("label[for=sample],#sample").hide();
$('label[for=id2],#id2').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="id1" name="a" />
<label for="id1">Option1</label><br/>
<input type="radio" id="id2" name="a" />
<label for="id2">Option2</label><br/>
<input type="radio" id="id3" name="a" />
<label for="id3">Option3</label><br/>
SOLUTION I ended up putting a DIV around the whole line and hiding the DIV.
Did you try give it an id?
$('br#hide').hide();
Something like this.
Get the id of the option and use it to disable the current option and remove the label and br.
$('input[type="radio"]').click(function() {
var label = $(this).next('label').attr("for", $(this).attr('id'));
$(this).hide();
$(label).next('br').hide();
$(label).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="id1" name="a" />
<label for="id1">Option1</label><br/>
<input type="radio" id="id2" name="a" />
<label for="id2">Option2</label><br/>
<input type="radio" id="id3" name="a" />
<label for="id3">Option3</label><br/>
or
var label = $('label[for=id2]');
$(label).next('br').hide();
$(label).hide();
$('#id2').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="id1" name="a" />
<label for="id1">Option1</label><br/>
<input type="radio" id="id2" name="a" />
<label for="id2">Option2</label><br/>
<input type="radio" id="id3" name="a" />
<label for="id3">Option3</label><br/>

JQuery "onchange" event on just one checkbox among multiple in a group based on label text

I have a group of checkboxes as -
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Due to variable values of id and name, I'm unable to handle onclick event on checkbox with label One.
I've tried this which works fine, but I don't want to use check_1 since the number 1 is variable and could be changed.
$("#check_1").change(function() {
alert('Checkbox One is clicked');
});
How do I do this as I have no access to modify the html ?
You can use a selector like this $('input[type="checkbox"]:has(+ label:contains("One"))') with the label text as below,
$('input[type="checkbox"]:has(+ label:contains("One"))').on('click', function(){
alert('Checkbox One is clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Looks like your only criteria is the text of the label so you could target the input based on that label like :
$('label:contains("One")').prev('input:checkbox').change(function(){
console.log('One changed');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="check_1" name="check[1]" type="checkbox" value="1"/>
<label for="check_1">One</label>
<input id="check_2" name="check[2]" type="checkbox" value="1"/>
<label for="check_2">Two</label>
<input id="check_3" name="check[3]" type="checkbox" value="1"/>
<label for="check_3">Three</label>
Hope this helps.

Categories