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");
}
});
Related
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 am using checkbox in the asp.net gridview. I want select only one checkbox at time. if I select one checkbox other checkboxes should be deselected.
I have html view source
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl02_ctl02_ctl00_ChkID" type="checkbox"
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl03_ctl02_ctl00_ChkID" type="checkbox"
Usually radio buttons are used for the exclusive functionality where only one item in a group is selected and the browser will do taht for you automatically with the right HTML.
For checkboxes, you could code it with jQuery like this:
<div class="checkboxContainer">
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl02_ctl02_ctl00_ChkID" type="checkbox"> Item 1<br>
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl03_ctl02_ctl00_ChkID" type="checkbox"> Item 2<br>
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl04_ctl02_ctl00_ChkID" type="checkbox"> Item 3
</div>
$("input[type='checkbox']").change(function() {
$(this).closest(".checkboxContainer").find("input[type='checkbox']").not(this).prop("checked", false);
$(this).prop("checked", true);
});
Working Demo: http://jsfiddle.net/jfriend00/hWEXx/
Here's the pure HTML way of doing exclusive radio buttons (also in that same demo):
<div class="radioGroup">
<input type="radio" name="group1">Item A<br>
<input type="radio" name="group1">Item B<br>
<input type="radio" name="group1">Item C<br>
</div>
Use a radio button instead of a checkbox.
<form>
<input type="radio" name="parents" value="Mom" /> Mom<br />
<input type="radio" name="parents" value="Dad" /> Dad
</form>
in asp.net you should use radiobuttons instead checkboxes (in this case)
<div class="group">
<asp:RadioButton Id="radio1" runat="server" GroupName="radioGroup" />
<asp:RadioButton Id="radio2" runat="server" GroupName="radioGroup" />
</div>
GroupName attribute make this functionality you need. (If radio1 is Checked the radio2 is automatically unchecked.
hope this help:)
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
I want to change the value of hidden input field when radio buttons selected :
<input type="radio" name="r1" value="10" />10
<br/>
<input type="radio" name="r1" value="45" />45
<br/>
<input type="hidden" name="sum" value="" />
for example when user click on one the buttons the value of hidden field change to that value.
Use the onClick property:
<input type="radio" name="r1" value="10" onClick="document.getElementById('hidfield').value=this.value"/>10
<br/>
<input type="radio" name="r1" value="45" onClick="document.getElementById('hidfield').value=this.value"/>
45
<br/>
<input type="hidden" name="sum" value="" id="hidfield" />
You can try for example
<input type="radio" id="radio1r1" name="r1" value="10" />10
<br/>
<input type="radio" id="radio2r1" name="r1" value="45" />45
<br/>
<input type="hidden" name="sum" value="" />
jQuery("input[id^='radio']").click(function() {
jQuery("input[name='sum']").val(jQuery(this).val());
}
So then when user click on each radio we handle it by various id with same start.
Using jQuery it would be:
$(":radio").click(function () {
var inputValue = $this.val();
$(":hidden[name='sum']").val() = inputValue;
$(":hidden[name='sum']").name() = "lalala";
});
I've not double checked that code so it might need a little tweaking.
hook into the onclick event for the radio button "r1". Normally I'd suggest the onchange event but in IE it isn't fired until the user "blurs" the radio button.
If you are using a framework like jQuery, hook in the events in a nice unobtrusive manner... but if you want a quick n dirty solution, just add the events inline.
<input type="radio" name="r1" value="10" onclick="doIt(this);"/>10
<br/>
<input type="radio" name="r1" value="45" onclick="doIt(this);"/>45
<br/>
<input type="hidden" name="sum" value="" />
<script>
function doIt(obj){
//alert('my value is now: ' + obj.value);
obj.form.elements['sum'].value = obj.value;//set hidden field to radio value
}
</script>