I have following HTML
<input id="Option1" name="Option1" type="checkbox" value="..." />
<input id="Option2" name="Option2" type="checkbox" value="..." />
<input id="Option3" name="Option3" type="checkbox" value="..." />
..........................
..........................
<input id="OptionN" name="OptionN" type="checkbox" value="..." />
Where N can be any number, from 1 to 500.
I want to write a single click event (jquery/JavaScript), so when a user click on any checkbox this method should be called.
Add MyClass class to checkbox
<input id="Option1" name="Option1" type="checkbox" class="MyClass" value="..." />
<input id="Option2" name="Option2" type="checkbox" class="MyClass" value="..." />
<input id="Option3" name="Option3" type="checkbox" class="MyClass" value="..." />
And use the following code
$(".MyClass").on("click", function(){
// Do stuff
})
If you couldn't set a common name or class to the elements, you could use the jQuery Attribute Starts With Selector.
$('input[type="checkbox"][id^="Option"]').on('click', function(){
// Do stuff
})
Given your markup and if there's a form surrounding your inputs:
$("form").on("click", "input[name^='Option'])", function(e) {
console.log(e);
});
Very popular mistake: id must be unique. If you want to target number (class) of elements you should use class:
<input id="Option1" class="option" name="Option1" type="checkbox" value="..." />
<input id="Option2" class="option" name="Option1" type="checkbox" value="..." />
JS:
$('.option').click(function() { ... });
I did it to a table when I click on a button i can remove it
so for your question I think that first of all put your input checkboxes in a DIV and give it an id
AND you give to each input the same class name
<div id="div_id">
<input id="Option1" name="Option1" type="checkbox" class="input_class" value="..." />
<input id="Option2" name="Option2" type="checkbox" class="input_class" value="..." />
<input id="Option3" name="Option3" type="checkbox" class="input_class" value="..." />
..........................
..........................
<input id="OptionN" name="OptionN" type="checkbox" class="input_class" value="..." />
</div>
So using JQuery you can do smth like that :
$("#div_id").on('click', '.input_class', function() {
alert($(this).attr("id"));
});
Hope this peace of code may help you :D
You can use ID based starts-with selector.
$("[id^='Option']").change(function(){
//your function
})
Related
I have the following HTML code (that I can't access/amend) for one of my many checkboxes:
<input type="checkbox" class="cat_input" name="subcategory1a" value="1">
I want to turn the checkbox into a toggle, for which I understand I need a <label> tag associated with the 'ID' of the checkbox. Unfortunately, the HTML code as per above has only the input tag without ID and no <label> tag.
To create a checkbox toggle I understand I would need a unique ID and associated <label> tag for each checkbox such as for example:
<input type="checkbox" class="cat_input" name="subcategory1a" value="1" ID="checkbox1"> <label for="checkbox1"></label>
I have two questions:
How can I add the ID and <label> tag with jQuery to my existing <input> tag to create a code as per the example?
Given that I have c. 40-50 checkboxes of which each needs its own ID and label tag, is there a way to make the jQuery code compact as opposed to copy paste the code 40-50x?
I would much appreciate your help. Thank you very much in advance!
EDIT
<script>
$('input[type="checkbox"]').each(function(i, v) {
var checkbox = $(this);
checkbox.attr("id", ("checkbox_" + (i + 1)))
checkbox.after($("<label>").attr("for", checkbox.attr("id")));
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="geodir-filter-cat gd-type-single gd-field-fieldset"><span>Header</span>
<ul>
<li><input type="checkbox" class="cat_input" name="subcategory1a" value="1" /> </li>
<li><input type="checkbox" class="cat_input" name="subcategory1b" value="1" /> </li>
</l>
</div>
You can iterate over each checkbox and add the label after it.
Example:
$('input[type="checkbox"]').each(function() {
var checkbox = $(this);
checkbox.after($("<label>").attr("for", checkbox.attr("id")));
});
In case your initial input doesn't have an id attribute set, then set it manually first:
$('input[type="checkbox"]').each(function(i, v) {
$(this).attr("id", ("checkbox_" + i))
$(this).after($("<label>").attr("for", $(this).attr("id")));
});
EDIT 1:
Putting this code into <head> is not going to work, as the content that this code addressing is not yet loaded at that time. Either put this code before closing </body> tag or use ready function.
$(function() {
// code above is here
});
According your given markup please see below:
$('.cat_input').each(function() {
var checkbox = $(this);
checkbox.attr('id', 'checkbox'+checkbox.index()); // Adding ID attribute
checkbox.after($("<label for='checkbox"+ checkbox.index() +"'>").text(checkbox.val())); // Adding label with for attribute
});
And HTML I assumed like following:
<input type="checkbox" class="cat_input" name="subcategory1a" value="1">
<input type="checkbox" class="cat_input" name="subcategory1a" value="2">
<input type="checkbox" class="cat_input" name="subcategory1a" value="3">
<input type="checkbox" class="cat_input" name="subcategory1a" value="4">
<input type="checkbox" class="cat_input" name="subcategory1a" value="5">
I always prefer to do it like <label><input /><span></span></label> for me I think its simple to use and to style/css it
$(document).ready(function(){
$('.cat_input').each(function(i){ // index start from 0
i = i + 1;
$(this).val(i).attr('id' , 'checkbox' + i).wrap('<label></label>').closest('label').append('<span>'+i+'</span>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
<input type="checkbox" class="cat_input" name="subcategory1a" />
the code for first input will be
<label>
<input type="checkbox" class="cat_input" name="subcategory1a" value="1" id="checkbox1"/>
<span>1</span>
</label>
I have this checkbox when clicked suppose to toggle(check or un-check) all other checkboxes of class "boxes" BUT instead gives this error:
Cannot read property 'toLowerCase' of
Here is the HTML:
<input type="checkbox" class="cb" name="cb" value="some_val" onchange="dosomething()" />
<input type="checkbox" class="boxes" name="boxes[]" value="1" />
<input type="checkbox" class="boxes" name="boxes[]" value="2" />
<input type="checkbox" class="boxes" name="boxes[]" value="3" />
Here is the JS/JQUERY:
function dosomething(){
$('.boxes:checkbox').prop('checked', $(this).is(":checked"));
}
I don't understand what that JQUERY error is.
When you call a function with inline onchange, the context isn't set, so you can't use $(this) in the function. You need to pass the element explicitly.
<input type="checkbox" class="cb" name="cb" value="some_val" onchange="dosomething(this)" />
function doSomething(el) {
$('.boxes:checkbox').prop('checked', $(el).is(":checked"));
}
Or you could do the event binding in jQuery:
<input type="checkbox" class="cb" name="cb" value="some_val" id="checkAll" />
$("#checkAll").click(function() {
$('.boxes:checkbox').prop('checked', $(this).is(":checked"));
});
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>
I have following code:
<input type="checkbox" name="field_1" value="on" /> Checkbox field_1
<input type="checkbox" name="field_1" value="off" /> Checkbox field_1
<input type="checkbox" name="field_2" value="on" /> Checkbox field_2
<input type="checkbox" name="field_2" value="off" /> Checkbox field_2
I need to wrap those elements with jQuery. It should look something like this:
<div>
<input type="checkbox" name="field_1" value="on" /> Checkbox field_1
<input type="checkbox" name="field_1" value="off" /> Checkbox field_1
</div>
<div>
<input type="checkbox" name="field_2" value="on" /> Checkbox field_2
<input type="checkbox" name="field_2" value="off" /> Checkbox field_2
</div>
I tried $("input[name=field_1]".wrappAll("<div></div>") but this will create a wrapper around the input elements but will not include the "Checkbox field_1...."
I suggest that you should modify existing code to become something like this:
<label><input type="checkbox" name="field_1" value="on" /> Checkbox field_1</label>
<label><input type="checkbox" name="field_1" value="off" /> Checkbox field_1</label>
<label><input type="checkbox" name="field_2" value="on" /> Checkbox field_2</label>
<label><input type="checkbox" name="field_2" value="off" /> Checkbox field_2</label>
This will not only simplify your jQuery code (for jQuery is very good working with tag nodes and not that good working with text nodes) but also will improve accessibility since labels after checkboxes will become clickable.
Then in jQuery:
$('input[name="field_1"]').parent().wrapAll('<div/>')
Try this:
function wrapFieldSet(fields) {
var wrapper = $('<div class="wrapper"></div>');
fields.first().before(wrapper);
fields.each(function() {
var text = $(this.nextSibling);
wrapper.append($(this)).append(text);
});
}
wrapFieldSet($('input[name="field_1"]'));
I was going to suggest wrapping Checkbox field_1 etc in a label, adding classes to each one and using this wrap example jQuery API to accomplish your goal
i.e.
<input id="foo1" class="bar" type="checkbox" name="field_1" value="on" />
<label class="bar" for="foo1">Checkbox field_1</label>
<input id="foo2" class="bar" type="checkbox" name="field_1" value="off" />
<label class="bar" for="foo2">Checkbox field_1</label>
Then use
$('.bar').wrap('<div class="something" />');
Then do the second section with a different class
Try this
var $div = $("<div />"), next, $this;
$("input[name=field_1]:first").before($div);
$("input[name=field_1]").each(function(){
$this = $(this);
next = $this.next();
$div.append($this);
$div.append(next)
});
$div = $("<div />");
it should work :
$('input[name=field_1]').wrapAll('<div />');
Click Here