CODEWITHSUNDEEP
jquery
Alexandre
Alexandre

Reputation: 13308

Issue with jQuery class

There is an checkBox on the page 

   <input 
       name='<%=htmlServiceId %>' 
       <%--class='parent-<%= service.ParentId.Value.GetCustomerServiceId() %>'--%>
       class='parent-<%=service.ParentId.Value.GetCustomerCategoryId() %> x-form-checkbox x-form-field'
       type='checkbox' 
       id="<%=htmlServiceId%>"
     />

Here is how the result html looks 

<input name="s8" class="parent-s18" id="s8" type="checkbox"/>

Before when checkBos had one class (parent-sXX) I find this checkBox (and others like this) by this way

//........................
var temp = $(this).attr('class').split('-');
  var parentId = temp[1];
  if ($(this).attr('checked')) {
                $('#' + parentId).attr('checked', 'checked');
                //.......................
 }

}

But now the checkBox has several classes (parent-sXX x-form-checkbox x-form-field ) and this solution by finding checkBox by class doesn't work.

How to fix it?

UPDATE: is there any way except using data attribute?

Upvotes: 0

Views: 72

Answers (4)

ipr101
ipr101

Reputation: 24236

If you wanted to keep your HTML as is, this should obtain the number you require from the list of classes - 

var parentId = $(this).attr('class').match(/parent-s(\d+)/)[1];
  if ($(this).attr('checked')) {
                $('#' + parentId).attr('checked', 'checked');
                //.......................
 }

Upvotes: 1

Richard Dalton
Richard Dalton

Reputation: 35793

Use data attributes and the jQuery data method:

HTML

<input 
   name='<%=htmlServiceId %>' 
   class='x-form-checkbox x-form-field'
   type='checkbox' 
   id="<%=htmlServiceId%>"
   data-parentId="<%=service.ParentId.Value.GetCustomerCategoryId() %>"
 />

JS

var parentId = $(this).data('parentId');
if ($(this).attr('checked')) {
    $('#' + parentId).attr('checked', 'checked');
}

Without using data attributes you can do this:

var temp = $(this).attr('class').split(' '), parentId;
for (var i = 0; i < temp.length; i++) {
    if (temp[i].indexOf('parent-') === 0) {
         parentId = temp[i].split('-')[1];
    }
}
if ($(this).attr('checked')) {
    $('#' + parentId).attr('checked', 'checked');
}

JSFiddle Example

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

I think it would be easier to just add another data- attribute and use that instead of trying to extract the id from one of the classes..

  <input 
       name='<%=htmlServiceId %>' 
       <%--class='parent-<%= service.ParentId.Value.GetCustomerServiceId() %>'--%>
       class='parent-<%=service.ParentId.Value.GetCustomerCategoryId() %> x-form-checkbox x-form-field'
       type='checkbox' 
       data-parentid="<%= service.ParentId.Value.GetCustomerServiceId() %>"
       id="<%=htmlServiceId%>"
     />

and use 

var parentId = $(this).data( 'parentid' );
if ( $(this).attr('checked')) {
                $('#' + parentId).attr('checked', 'checked');

Update

Since you cannot use data here is a way to split the classes ..

var itemClasses = $(this).attr('class').split(' ');
var parentId = '';

for (var i = 0; i < itemClasses.length; i++) {
    if (itemClasses[i].indexOf('parent-s') == 0) {
        parentId = itemClasses[i].split('-')[1];
        break;
    }
}

if ($(this).attr('checked')) {
    $('#' + parentId).attr('checked', 'checked');
}

Upvotes: 1

Marco Johannesen
Marco Johannesen

Reputation: 13134

If you want to maintain your original code, you can just filter out the class.

See: http://jsfiddle.net/mSRZY/

$(':checkbox').change( function() {

    //get classes
    var getClass = $(this).attr('class');
    //seperate them into an array
    var classes = getClass.split(' ');

    //loop the array, replace getClass if it find the "search param"
    $.each(classes, function(index,value) {
        if(value.indexOf("parent") != -1) {
            getClass = value;
        }
    });

    alert(getClass);
});

Upvotes: 2

Related Questions