This question already has answers here:
Check/Uncheck checkbox with JavaScript
(12 answers)
Closed 7 years ago.
This is my HTML code:
<a id="id_1" name="n_1" href="#" onclick="callFn(this.id);">
<input type="checkbox" name="ck_1" id="xyz">
Click Here
</a>
I want to check this checkbox using Javascript code. How to do it??
Use <label> instead of <a>.
<label id="id_1" onclick="callFn(this.id);">
<input type="checkbox" name="ck_1" id="xyz">
Click Here
</labek>
This is the use of <label> tag. And moreover, you don't need callFn(this.id); at all.
Here is simple DEMO.. hope it helps
$("#check").click(function() {
var checkBoxes = $("#xyz");
checkBoxes.attr("checked", !checkBoxes.attr("checked"));
});
<label id="id_1" onclick="callFn(this.id);" for="xyz">
<input type="checkbox" name="ck_1" id="xyz">
Click Here
</labek>
<br/>
<button id="check">By button</button>
Get the element using its ID:document.getElementById("xyz")
Then change its property checked to true:
document.getElementById("xyz").checked = true;
Related
This question already has answers here:
Check if checkbox is checked with jQuery
(26 answers)
Closed 8 years ago.
I have this:
<fieldset id="booom">
<label><INPUT TYPE="checkbox" NAME="a" VALUE="a">something></label>
<label><INPUT TYPE="checkbox" NAME="b" VALUE="b">something></label>
<label><INPUT TYPE="checkbox" NAME="c" VALUE="c">something></label>
</fieldset>
<input type="button" id="answer" value="submit">
How can I check with jQuery if all checkboxes from fieldset 'booom' are unchecked on submit?
So:
if (all checkboxes from parent 'booom' are unchecked) {
alert("something")
}
I found many posts about this but none with an actual simple working sample with a button and an alert box :)
Thanks!
You can use the :checked modifier in a selector.
if ($("#boom :checkbox:checked").length == 0) {
alert("You have to check at least one box");
}
This question already has answers here:
How to clear all checkbox When checkbox id="checkAll" are checked?
(4 answers)
Closed 8 years ago.
How to Clear checkbox When checked other checbox ? using java script
When user checked checkbox id="checkItem1" or id="checkItem2" or id="checkItem3" i want to clear checkbox id="checkAll" How can i do that ? using java script
<input type="checkbox" id="checkAll" checked > Check All
<hr />
<input type="checkbox" id="checkItem1"> Item 1
<input type="checkbox" id="checkItem2"> Item 2
<input type="checkbox" id="checkItem3"> Item 3
http://jsfiddle.net/peap/sydzL8Lc/8/
Using jQuery, you can just write:
$("#checkItem1").click(function() {
$("#checkAll").prop('checked', false);
});
and repeat that for checkItem2 and checkItem3. But I recommend to add a class to all checkItems, that would make it easier to select them.
This question already has answers here:
How can I select an element by name with jQuery?
(14 answers)
Closed 9 years ago.
We have two divs:
How to select all the input field as an array with name="divText" that are inside "div2".
//Body of div1
<div id="div1>
<input type="text" name="divText" value="v1" />
<input type="text" name="divText" value="v2"/>
<input type="text" name="divText" value="v3"/>
</div>
//Body of div2
<div id="div2>
<input type="text" name="divText" value="q1" />
<input type="text" name="divText" value="q2"/>
<input type="text" name="divText" value="q3"/>
</div>
Use Attribute Equals Selector [name="value"] along with ID Selector (“#id”). There is error in your html the closing quote of div id div1 and div2 is missing as well.
Live Demo
$('#div2 input[name="divText"]')
to get input field as an array, use .get():
var inpfromdiv2=$('#div2').find('input[name="divText"]').get();
Use the attribute selector
$("#div2 > input[name='divText']")
The jquery selector isn't an array but can for a lot of purposes be treated as such
Another way :
$("#div2 input[type=text]")
As #adil answered it is the right way to do what you asked, but I think it is a better practice to put a class and then select it. For example:
<div class="some_class">...</div>
<span class="some_class">...</span>
$('.some_class')
this what you are not constrained for any tag type.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am trying to do group checkboxes by selecting selectAll. Please check JSFiddle for code sample
JSFiddle
<fieldset>
<!-- these will be affected by check all -->
<div><input type="checkbox" ID="checkall1" onclick="CheckAllClick('checkall1');"> Check all</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
<fieldset>
<!-- these won't be affected by check all; different field set -->
<div><input type="checkbox" ID="checkall2" onclick="CheckAllClick('checkall2');"> Check all</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
<div><input type="checkbox"> Checkbox</div>
</fieldset>
function CheckAllClick(id){
alert(id);
$(id).closest('fieldset').find(':checkbox').prop('checked', this.checked);
}
Part 2: Continue
You have some issues in your function: Try this way:
Js
function CheckAllClick(elem) {
$(elem).closest('fieldset').find(':checkbox').prop('checked', elem.checked);
}
Markup
<input type="checkbox" ID="checkall1" onclick="CheckAllClick(this);">Check all</div>
Fiddle
Pass the element in the onclick function as this and access it in your code.
If you can go with jquery approach then:
Add a class to your checkall check boxes
<input type="checkbox" class="checkAll" ID="checkall1" >Check all
With the same code, if you want to make the label click to check the checkbox then just wrap them in label tag, same thing you can do with all the checkboxes by wrapping them in label which generally is a standard way:
<label><input type="checkbox" class="checkAll" ID="checkall1" >Check all<label>
Bind an event handler to a class
$('.checkAll').on('change', function(){
$(this).closest('fieldset').find(':checkbox').prop('checked', this.checked);
})
Fiddle
function CheckAllClick(id){
alert(id);
$(id).closest('fieldset').find(':checkbox').prop('checked', 'checked');
}
The simplest solution is just to changed the checked property to checked seeing as you only selecting inputs you want already
And pass this into your onclick
<div><input type="checkbox" ID="checkall2" onclick="CheckAllClick(this);"> Check all</div>
What you probably want is this.
$('[id^=checkall]').click(function(){
$(this).closest('fieldset').find(':checkbox').not(this).prop('checked', function(i,oldval){
return !oldval;
});
});
Fiddle
I have a long list of checkboxes each with a link next to it. Something like:
<form name="checkboxlist" action="..." >
<input type="checkbox" id="1" name="pageCB" value="1"/>
<a id="1" href="#" onclick="sub(id)>click here</a>
<input type="checkbox" id="2" name="pageCB" value="2"/>
<a id="2" href="#" onclick="sub(id)>click here</a>
...
...
<input type="submit" />
</form>
I am currently trying to use:
<script>
function sub(id){
$("input:checkbox[value=id]").attr("checked", true);
document.checkboxlist.submit();
}
</script>
But this obviously does not read the variable id and I would really like to avoid making if statements for each id as there are several hundred of them. Is there some way to do this?
You shouldn't use a link you should use a <label> tag.
That's what it's made for.
<input type="checkbox" name="mybox" id="mybox">
<label for="mybox">Click this box</label>
This works for all form fields and is way better than having to build JS to do something that already exists.
EDIT: I see you're also using duplicate IDs. This is invalid, and things will not work properly when selecting by ID.
Numeric IDs are invalid in HTML4.
Anyway, change this:
$("input:checkbox[value=id]")
to this:
$("input:checkbox[value='" + id + "']")
This concatenates the value of id into the selector string, and I also added quotation marks around the attribute selector value since they're required by the docs.
And change your inline handlers to this:
<a id="2" href="#" onclick="sub(this.id)>click here</a>
...because this is a reference to the element clicked, so this.id is a reference to its ID attribute.
If I understand correctly, you want to support selecting checkboxes by clicking on an associated element, and to submit the form on click. I would suggest a) Use a <label> element in place of <a> as they can be associated with inputs by id and b) don't use numeric, duplicate id attributes.
<form name="checkboxlist" action="#">
<input type="checkbox" id="a" name="pageCB" value="1"/>
<label for="a">Click here</label>
<input type="checkbox" id="b" name="pageCB" value="2"/>
<label for="b">Click here</label>
</form>
<script>
$(document).ready(function() {
$('input:checkbox').change(function(){
$(this).parent('form').submit();
});
});
</script>