asp.net mvc checkbox uncheck on check of toher - javascript

I have an MVC 2 view with two checkboxes like this:
<%: Html.Label("Is Customer")%>
<%
accountStatus = Model.AccountStatus == "Customer" ? true : false;
%>
<%: Html.CheckBox("IsCustomer", accountStatus.Value, new { onclick = "uncheckAll(this);" })%>
I want that if one checkbox is checked then other one is uncheked. I am getting ids like this:
function uncheckAll(ID) {
var search_form = document.getElementById('frmAccountEdit');
var IsTrialAccount = document.getElementById('IsTrialAccount'); // getElementsByTagName("input");
var IsCustomer = document.getElementById('IsCustomer');
How to make this worked ?

Alright try the below. It will clear both IsTrialAccount and IsCustomer but then check whichever checkbox was checked. If you don't want "IsTrialAccount" to have the same functionality then just don't add it to its button click event and remove the "|| inputs[j].name == "IsCustomer"" part
function uncheckAll(Checkbox)
{
var inputs = document.getElementsByTagName("input");
for(var j = 0; j < inputs.length; j++) {
if(inputs[j].type == "checkbox" &&
(inputs[j].name == "IsTrialAccount" || inputs[j].name == "IsCustomer"))
{
inputs[j].checked = false;
}
}
// Check the selected checkbox
Checkbox.checked = true;
}

Related

JavaScript - Checkbox onchange function is not executing the whole way through

I have an input of type checkbox with an onchange event as shown below:
<input type="checkbox" runat="server" id="cbWarehouse" onchange="disableAllButtons()"/>
<script>
function disableAllButtons()
{
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (i = 0; i < gvDetailControls.length; i++)
{
gvDetailControls[i].disabled = true;
}
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (i = 0; i < gvSummaryControls.length; i++)
{
gvSummaryControls[i].disabled = true;
}
}
</script>
This function's purpose is to disable all buttons in two GridViews - gvSummary and gvDetail. However, it only disables the buttons in whichever GridView I mention first in the JS function. I.e. in the example above, the buttons in gvDetail will be disabled but not in gvSummary.
So it seems that the function stops halfway through..?
Anyone have any ideas where I am going wrong?
****EDIT (RESOLVED)****
Issue was resolved by checking that each GridView was defined and not null:
<script>
function disableAllButtons()
{
// gvSummary
var gvSummary = document.getElementById("<%=gvSummary.ClientID %>");
if (typeof (gvSummary) != 'undefined' && gvSummary != null)
{
var gvSummaryControls = gvSummary.getElementsByTagName("input");
for (var i = 0; i < gvSummaryControls.length; i++) {
gvSummaryControls[i].disabled = true;
gvSummaryControls[i].className = "btn-xs btn-secondary";
}
gvSummary.title = "You have unapplied filters. Pleae update table.";
}
// gvDetail
var gvDetail = document.getElementById("<%=gvDetail.ClientID %>");
if (typeof (gvDetail) != 'undefined' && gvDetail != null)
{
var gvDetailControls = gvDetail.getElementsByTagName("input");
for (var i = 0; i < gvDetailControls.length; i++) {
gvDetailControls[i].disabled = true;
gvDetailControls[i].className = "btn-xs btn-secondary";
}
gvDetail.title = "You have unapplied filters. Pleae update table.";
}
}
</script>

How to determine which checkboxes are checked in an HTML form?

I have 11 checkboxes in my HTML form and already have a section in my onclick function to determine how many of them were checked, but I would like to be able to tell which of the checkboxes were checked, and possibly just add whichever checkboxes were checked to an arraylist by id/value etc.
EDIT: (Fixed code..?)
var formobj = document.forms[0];
var ingNum = 0;
checked = [];
for (var j = 0; j < formobj.elements.length; j++) {
if (formobj.elements[j].type == "checkbox" && formobj.elements[j].checked) {
ingNum++;
checked.push(formobj.elements[j].value);
}
}
If you want to convert the ones checked to an array of their value attributes (if id attribute, swap value with id), you could use...
var inputs = document.getElementById('your-form').getElementsByTagName('input'),
checked = [];
for (var i = 0, length = inputs.length; i < length; i++) {
if (inputs[i].type == 'checkbox' && inputs[i].checked) {
checked.push(inputs[i].value);
}
}
That will work on any of the older IEs you may care about.
If you have the luxury of only supporting newer browsers, you could use...
var checked = [].slice.call(document
.querySelectorAll('#your-form input[type="checkbox"]'))
.filter(function(checkbox) {
return checkbox.checked;
})
.map(function(checkbox) {
return checkbox.value;
});
If you were using a library such as jQuery, it's even simpler...
var checked = $('#your-form :checkbox:checked')
.map(function() {
return this.value;
})
.get();
var checkedBoxes = [];
$("input:checked").each(function() {
checkedBoxes.push($(this));
});
Actually, I think you could just do this:
var checkedBoxes = $("input:checked");
but I'm not 100% sure if that works.

Gridview with multiple columns of checkboxes selection in javascript

I am using a Gridview with checkboxes in my application.
Here is the format:
In the gridview if header checkbox is checked then all subsequent chekboxes under that should also be checked or unchecked as the case of header chekbox.
for this I am using java script function as.
function SelectAllFirstRow(ChK, cellno)
{
var gv = document.getElementById("ggvPage");
for (var i = 1; i <= gv.rows.length - 1; i++) {
var chk1 = gv.rows(i).cells(cellno).firstChild;
chk1.checked = ChK.checked;
}
}
Here :
ggvPage is the Gridview.
Chk is the header Checkbox and cellno is like 1 for view,2 for Add and.........
It's working fine in IE but not in Firefox and chrome.
Please suggest some solution for fulfilling my need.
Waiting for valuable solutions,
Thanks a lot,
Supriya
Use function .each() in jQuery http://api.jquery.com/jQuery.each/
Use this javascript. It is just an example. You can modify it as per your requirement
function SelectAllFirstRow(ChKAdd)
{
if (ChKAdd.checked==false)
{
SelectCheck();
}
else
{
DeselectCheck()
}
}
function SelectCheck() {
var flag;
for (i = 0; i < document.forms[0].elements.length; i++) {
elm = document.forms[0].elements[i];
if ((elm.type == 'checkbox') && (elm.name == 'chkSelectAdd') && (elm.checked == false)) {
elm.checked = true;
changeColor(elm);
flag = 1;
}
}
return false;
}
function DeselectCheck() {
for (i = 0; i < document.forms[0].elements.length; i++) {
elm = document.forms[0].elements[i];
if ((elm.type == 'checkbox') && (elm.name == 'chkSelectAdd') && (elm.checked == true)) {
elm.checked = false;
changeColor(elm);
}
}
return false;
}
// changes the color of the selected row
function changeColor(chkBox) {
var rowVar = chkBox.parentNode.parentNode;
if (chkBox.checked) {
rowVar.style.backgroundColor = "#EDEDED";
}
else {
rowVar.style.backgroundColor = "#FFFFFF";
}
}
where chkAdd is the name of checkbox at header which is for Add and chkSelectAdd is the names of checkboxes in GridView under Add header.
In ItemTemplate of the GridView use like this
<ItemTemplate>
<input name="chkSelectAdd" type="checkbox" value='<%#DataBinder.Eval(Container.DataItem,"ID") %>'
onclick='javascript: changeColor(this)' />
</ItemTemplate>

javascript to create multiple checkboxes in for statement

Hi I am trying to create a bunch of checkboxes without having to make each one currently I have:
function test(obj) {
if (document.getElementByID("info").checked == true) {
document.getElementById("gender")[0].disabled = true;
}
}
and it works for one checkbox but I have been trying to use the code below:
function test(obj) {
var x = obj.name;
var rowCount = $('#List tr').length;
for (var i = 0; i rowCount-1; i++) {
if (x == document.getElementByID("info"["+i+"]).checked == true) {
document.getElementById("gender"["+i+"]).disabled = true;
}
}
}
to create as many checkboxes as I want without me having to make each one but it doesn't seem to be working.
Ok, lets start from the beginning:
To create a check-box in javascript you must do something like this:
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
Then to add your checkbox into a div on your webpage you would do something like:
document.getElementById("your_div_id").appendChild(checkbox);
Then to see if the checkbox is checked you look at the "checked" property like so:
var isChecked = !!document.getElementById("your_checkbox").checked;
if(isChecked == true){
// Do whatever you want
}
Here's a function that would loop through a bunch of checkboxes
function testCheckBoxes(container_id){
var checkboxes = document.querySelector("#" + container_id + " > input[type='checkbox']");
for(var i = 0; i < checkboxes.length; i++){
if(!!checkboxes[i].checked == true){
// Your code
}
}
[Side Note: I'm using document.querySelector for consistency but since I think you're using jquery then use $ instead]
If you want to do something when someone clicks on your checkbox the use an event listener:
var list = document.getElementsByClassName("checkbox");
for(var i = 0; i < list.length; i++){
list[i].addEventListener('click', function(event){
if(!!event.target.checked == true){
// Do something
}
}, true);
}
Hopefully this is enough to get you started. Good Luck =)

Validation of Checkbox in Listview Control by Jquery/Javascript?

I am trying to validate the checkbox which is one of the items in ListView control.
I have the button to check so I define the ClientClick function on the button and wrote JavaScript code.
But It didn't work. Display the lstViewtest object null.
function btnclick() {
var listview = document.getElementById('<%=
lstviewtest.FindControl("tableItem").ClientID %>');
for (var i = 0; i < listview.rows.length; i++) {
var inputs = listview.rows[i].getElementsByTagName('input');
for (var j = 0; j < inputs.length; j++) {
if (inputs[j].type === "checkbox" || inputs[j].type === "checkboxsend")
if (inputs[j].checked)
return true;
}
alert("Please select at least one");
return false;
}
}

Categories