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
Related
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
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 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
})
I want to be able to select only 1 checkbox at a time in Datatables.
In the example below, multiple rows can be selected. How can I go about only allowing one row to be selected at a time?
http://datatables.net/examples/api/form.html
You could use Radio buttons instead of checkboxes.
Example:
<input type="radio" name="fieldName" value="check1" />
<input type="radio" name="fieldName" value="check2" />
<input type="radio" name="fieldName" value="check3" />
<input type="radio" name="fieldName" value="check4" />
The "name" attribute is what groups the radio buttons together, the "value" attribute is what will differentiate them.
How to select first row of the first table in an html page using jQuery?
Selects one row in a given table.
You could use jQuery to achieve it.
You should use the radio button,
<form action="path/to/form_submit_script.php" method="get">
<input type="radio" name="red" value="Red" /> Red<br />
<input type="radio" name="blue" value="Blue" /> Blue<br />
<input type="radio" name="green" value="Green" /> Green<br />
<input type="submit" value="Submit">
</form>
Here is the working example jsfiddle example
var _MainDataTable = $('#dataTable').DataTable();
...
$("#dataTable").on('click', 'tr', function () {
if (_MainDataTable.$(".selected").length > 1) {
_MainDataTable.$(".selected").removeClass('selected');
$(this).addClass("selected");
}
});
<label class="default" for="checkbox1"><input id="checkbox1" name="checkbox1" type="checkbox" style="display:none" /> some text</label><br />
<label class="default" for="checkbox2"><input id="checkbox2" name="checkbox2" type="checkbox" style="display:none" /> some text</label><br />
<label class="default" for="checkbox3"><input id="checkbox3" name="checkbox3" type="checkbox" style="display:none" /> some text</label><br />
How should I change the currently clicked checkbox's label background color using jQuery? For example when the second checkbox is checked it's style should be changed with "checked":
<label class="checked" for="checkbox2"><input id="checkbox2" name="checkbox2" type="checkbox" style="display:none" /> some text</label><br />
There is a checkbox selector in jQuery, so using that, assign the click function to grab the parent "label" element and toggle the css class to "checked". This will add the class and remove the class depending on the state of the checkbox.
$("input:checkbox").click(function() { $(this).parent("label").toggleClass("checked");
Also, you will have more luck with your css class names if you do:
<label class="checked" for="checkbox2"><input id="checkbox2" name="checkbox2" type="checkbox" style="display:none" /> some text</label><br />
instead of what you did above. ;)
You need to handle the change event and set the background color after checking whether this.checked.
For example:
$(':checkbox').change(function() {
$(this).css('background-color', this.checked ? 'red' : 'transparent');
});
$("input[#type='checkbox']").click(function(){
$(this).toggleClass('checked');
});
Your html should look more like this:
<input id="checkbox1" name="checkbox1" type="checkbox" style="display:none" />
<label style="default" for="checkbox1"> some text</label><br />
The jQuery will look like this:
$("input[type=checkbox]").select(function() {
$(this).toggleClass("checked");
});