在javascript函数中发送此参数

Question

I have checkbox as below :

<label class="checkbox"><input type="checkbox" class="serviceable_check_1" id="serviceable1" name="condition_of_materials[]" onclick="checkOnlyOne(1,obj); return false;" ><span> Serviceable</span></label>

And javascript function is :

function checkOnlyOne(slno, this) { //Error here 
  console.log(this);
  //$('.serviceable_check_1').not(this).prop('checked', false);
  if(this.checked){
     $('.serviceable_check_1').not(this).prop('checked', false);
  }
}

I am getting javascript error as Uncaught SyntaxError: Unexpected token this . How do I send this parameter onchange event ?

Answer 1

Your this does not refer to anything. You can't put this on a function unless it is an object or part of the DOM.

You can put the this keyword on the element that will trigger the function as an argument. Then on your function, make the parameter a variable like chckbx or radiobtn if those are your elements

document.getElementById('mycheckbox').onchange = myFunction(this);

function myFunction(chckbx){
console.log(chckbx);
}

Answer 2

see below snippet

 function checkOnlyOne(slno, obj) { //Error here console.log(obj); //$('.serviceable_check_1').not(this).prop('checked', false); if(obj.checked){ $('.serviceable_check_1').not(obj).prop('checked', false); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="checkbox"><input type="checkbox" class="serviceable_check_1" id="serviceable1" name="condition_of_materials[]" onclick="checkOnlyOne(1,this); return false;" ><span> Serviceable</span></label> 

Answer 3

you can get the event object

Serviceable

function checkOnlyOne(slno, e {
    console.log(e.target);
    //$('.serviceable_check_1').not(e.target).prop('checked', false);
    if(this.checked)
        $('.serviceable_check_1').not(e.target).prop('checked', false);
}

e.target is the element you clicked

Answer 4

您应该使用.call并将obj作为第一个参数传递，以将其用作this上下文

<input id="serviceable1" onclick="checkOnlyOne.call(obj, 1); return false;" ><span> Serviceable</span></label>

Answer 5

First for the error: you cannot name an argument "this" since it is a reserved word.

Now, "this" refers to its context of execution, thus, the onclick handler is a method of the element, and therefore will be excecuted in it's context (input element in our case).

Notice the second alert in the snippet, you will see that onclick calls the function you defined from its body, which means that this function we've defined is not a method of the input object element and therefore not "attached" to it and will be called from the context in which it was declared(the window object).

 var value = "I'm the value out of the input object"; function displayMessage(context){ //we save the original context as arg alert("input's value: " + context.value); alert("the onclick handler:" + context.onclick); //but notic that the context has changed alert("the context in our function: " + this); alert("when trying without saving the previous context: " + this.value); } 

 <input type="checkbox" id="subscribeToNews" value="Newsletter" onclick="displayMessage(this)"/> <label for="subscribeToNews" >Subscribe </label>