Checkbox immer wieder falsch

Question

Ich habe ein paar Artikel gelesen über Checkboxen immer einen falschen Zustand, aber habe nichts über mein eigenes Problem gefunden.

So, hier ist das Skript:

<script type="text/javascript"> 
    function update_contact(id, name) { 
     alert("idCont : " + id + "\n nameCKB : " + name + "\n state : " 
       + $(this).attr('checked')); 
     var a = location.pathname.substring(1).split('/') 
     $.ajax({ 
      url : '@Url.Action("update_contact")', 
      type : 'POST', 
      data : { 
       name : name, 
       isChecked : $(this).is(':checked'), 
       idOpp : a[2], 
       idCont : id 
      }, 
      success : function(result) { 
      } 
     }); 
    }; 
</script> 

Und hier ist der Code der Checkbox:

@If mail = False Then 
    @<input type="checkbox" name="mailed" id="mailed" class="mailed" onclick="update_contact(@item.idContact.toString() , 'mailed')" /> 
Else 
    @<input type="checkbox" name="mailed" id="mailed" class="mailed" onclick="update_contact(@item.idContact.toString() , 'mailed')" checked="checked" /> 
End If 

Und hier wird der Code vom Server generiert:

<input name="mailed" id="mailed" class="mailed" onclick="update_contact(1 , 'mailed')" type="checkbox"> 

In Am Anfang habe ich einen HTML-Helfer benutzt. Es wurde Rückkehr smth wie folgt aus:

<input id="mailed" name="mailed" onclick="update_contact(1 ,'mailed')" value="true" type="checkbox"> 
<input name="mailed" value="false" type="hidden"> 

ich, obwohl es aufgrund der zweiten Eingang war, dass es immer einen falschen Zustand zurückkehrt.

(sorry, wenn mein Englisch ist schlecht, ich bin kein Englisch als Muttersprache)

Answer 1

Das Problem ist wahrscheinlich, dass this nicht was du denkst es ist. Versuchen Sie explizit einen Verweis auf die angeklickt Checkbox auf Ihre Funktion übergeben:

@If mail = False Then 
     @<input type="checkbox" name="mailed" id="mailed" class="mailed" onclick="update_contact(@item.idContact.toString() , 'mailed', this)" /> 
Else 
     @<input type="checkbox" name="mailed" id="mailed" class="mailed" onclick="update_contact(@item.idContact.toString() , 'mailed', this)" checked="checked" /> 
End If 

Und dann:

function update_contact(id, name, cb) { 
     alert("idCont: " + id + "\n nameCKB: " + name + "\n state: " + cb.checked); 
     // you could say $(cb).attr("checked"), but cb.checked is more efficient 
     // and easier to read 
     var a = location.pathname.substring(1).split('/') 
     $.ajax({ 
      url: '@Url.Action("update_contact")', 
      type: 'POST', 
      data: { 
        name: name, 
        isChecked: cb.checked, 
        idOpp: a[2], 
        idCont: id 
      }, 
      success: function (result) {} 
     }); 
    }; 

Alternativ jQuery verwenden, um die Click-Handler zuweisen und es wird this für Sie richtig eingestellt ist. Sie können die @item.idContact.toString() im value Attribute setzen und es dann zugreifen this.value in Ihrem Handler:

@If mail = False Then 
     @<input type="checkbox" name="mailed" id="mailed" class="mailed" value="@item.idContact.toString()" /> 
Else 
     @<input type="checkbox" name="mailed" id="mailed" class="mailed" value="@item.idContact.toString()" checked="checked" /> 
End If 

Und dann:

$(document).ready(function() { 
    $("#mailed").click(function() { 
     alert("idCont: " + this.value + "\n nameCKB: " + this.name + "\n state: " + this.checked); 
     // you could say $(this).attr("checked"), but this.checked is more efficient 
     // and easier to read 
     var a = location.pathname.substring(1).split('/') 
     $.ajax({ 
      url: '@Url.Action("update_contact")', 
      type: 'POST', 
      data: { 
        name: this.name, 
        isChecked: this.checked, 
        idOpp: a[2], 
        idCont: this.value 
      }, 
      success: function (result) {} 
     }); 
    }); 
}); 

(Anmerkung: Ich weiß es nicht eigentlich die VB/Rasierer Syntax Ich denke nur an diesen Teil.)

Answer 2

Versuchen Sie, diese (Arbeits Geige hier: http://jsfiddle.net/Ac3kd/):

<script type="text/javascript"> 
    function update_contact(id, name) { 
     var source = $('#'+name); 
     alert("idCont : " + id + "\n nameCKB : " + name + "\n state : " + source.attr('checked')); 
     var a = location.pathname.substring(1).split('/') 
     $.ajax({ 
      url: '@Url.Action("update_contact")', 
      type: 'POST', 
      data: { 
        name: name, 
        isChecked: source.is(':checked'), 
        idOpp: a[2], 
        idCont: id 
      }, 
      success: function (result) {} 
     }); 
    }; 
</script> 

Answer 3

Mamoo ist korrekt: $ .ajax ist ein jQuery-Objekt, also $(this) wird nicht auf das Element verweisen, das die Funktion update_contact aufgerufen hat.Statt zwei Variablen zu schaffen (source ans a) als Mamoo der Fall ist, würde ich die var data kurz vor dem $.ajax Bit erstellen:

function update_contact(id,name) 
{ 
    var data = {name: name, 
       isChecked: $(this).is(':checked'), 
       idOpp: location.pathname.substring(1).split('/')[2], 
       idCont: id}; 
    $.ajax({ 
      url: '@Url.Action("update_contact")', 
      type: 'POST', 
      data: data, 
      success: function (result) {} 
     }); 
} 

EDIT

für $(this) zu arbeiten, anstatt Namen vorbei und ID-Parameter - was impliziert, dass Sie das Kontrollkästchen-Element irgendwo ausgewählt haben, und Sie rufen die Funktion in einer ähnlichen Weise wie folgt auf:

update_contact($(elem).attr('id'),$(elem).attr('name')); 

benutzen Sie einfach die kürzer, sauberer und leistungsstärker:

update_contact.call($(elem)); 

oder dem Inline- onclick="update_contact()"-onclick="update_contact.call(this)" ändern. nur das, ohne das $ -Zeichen oder die Klammern ...