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.
Related
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" />
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>
I am trying to change the value of a textbox based on the selection a group of 4 radio buttons. This is not the actual html code, but a simplified version:
<input type="radio" name="radiogroup" id="radiogroup" value="5" />
<input type="radio" name="radiogroup" id="radiogroup" value="10" />
<input type="radio" name="radiogroup" id="radiogroup" value="15" />
<input type="radio" name="radiogroup" id="radiogroup" value="20" />
<input type="text" name="amount" id="amount" />
So what I am trying to do is fill the textbox named "amount" with either 5, 10, 15 or 20 based on which radio button is selected.
I am new to jquery and everything I tried did not work.
Thank you in advance for any help.
cdr6545
You can easily do this by adding class.
Working Fiddle
HTML:
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" id="radiogroup" class="radiogroup" value="20" />
<input type="text" name="amount" id="amount" />
JS:
$('.radiogroup').change(function(e){
var selectedValue = $(this).val();
$('#amount').val(selectedValue)
});
ID's are unique, and an ID can only be used on one element in the current document, so change it to classes.
Then attach a change event handler to the radios, get the checked one, and set the value of the text input to the checked radios value
$('.radiogroup').on('change', function() {
$('#amount').val( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="radiogroup" class="radiogroup" value="5" />
<input type="radio" name="radiogroup" class="radiogroup" value="10" />
<input type="radio" name="radiogroup" class="radiogroup" value="15" />
<input type="radio" name="radiogroup" class="radiogroup" value="20" />
<br /><br />
<input type="text" name="amount" id="amount" />
Something like:
$('input[name="radiogroup"]').click(function()
{
$('#amount').val($(this).val())
})
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('');
I am trying to populate a series of textboxes from a number of checkboxes. There are 8 text boxes and it seems that code will only populate one of these fields.
here is the checkboxes:
<input name="naicscode" id="naicsCodeCheckbox0" class="naicsCodeCheckbox" type="checkbox" value="1" />
<input name="naicscode" id="naicsCodeCheckbox1" class="naicsCodeCheckbox" type="checkbox" value="1" />
<input name="naicscode" id="naicsCodeCheckbox2" class="naicsCodeCheckbox" type="checkbox" value="2" />
<input name="naicscode" id="naicsCodeCheckbox3" class="naicsCodeCheckbox" type="checkbox" value="3" />
<input name="naicscode" id="naicsCodeCheckbox4" class="naicsCodeCheckbox" type="checkbox" value="4" />
<input name="naicscode" id="naicsCodeCheckbox5" class="naicsCodeCheckbox" type="checkbox" value="2" />
<input name="naicscode" id="naicsCodeCheckbox6" class="naicsCodeCheckbox" type="checkbox" value="3" />
<input name="naicscode" id="naicsCodeCheckbox7" class="naicsCodeCheckbox" type="checkbox" value="4" />
<input type="button" id="secondaryNaicsButton" name="save_value" value="Save" />
heres the textboxes:
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode0" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode1" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode2" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode3" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode4" class="fpp_textfield NAICS-code-field" value="" type="text" />
<input name="secondaryNaicsCodeField" id="secondaryNaicsCode5" class="fpp_textfield NAICS-code-field" value="" type="text" />
here is my jQuery:
// gets values of check box in Secondary NAICS list
$('#secondaryNaicsButton').click(function() {
$('.naicsCodeCheckbox:checked').each(function(i){
var val = []
val[i] = $(this).val();
for (var i =0; i < val.length; i++) {
$('#secondaryNaicsCode'+i).val(val[i]);
}
});
the result i'm getting is that it will give the value of one of the check boxes and put it in text box 3 or 4.
this is what console log is giving me :
111140 fol_reg_form.js:215
undefined fol_reg_form.js:215
111150 fol_reg_form.js:215
2
undefined fol_reg_form.js:215
111219 fol_reg_form.js:215
3
undefined fol_reg_form.js:215
111331 fol_reg_form.js:215
4
undefined fol_reg_form.js:215
111334
Try this:
$('#secondaryNaicsButton').click(function () {
$('.naicsCodeCheckbox').each(function (i) {
if (this.checked) {
$('#secondaryNaicsCode' + i).val(this.value);
}
});
});
Demo here
Note: in your code you have no class with name .naicscode, so I used class naicsCodeCheckbox instead. If you want to go by name you can use the same code but with $('input[name="naicscode"]').each( //etc ... instead.
I got the code to work. Took some good advice.
here's the code:
// gets values of check box in Secondary NAICS list
$('#secondaryNaicsButton').click(function() {
$('.naicsCodeCheckbox:checked').each(function(e) {
val = []
val[e] = $(this).val();
$('#secondaryNaicsCode'+e).val(val[e]);
});
});
demo here