So I have a ajax search form which gives results with a checkbox: Here is part of PHP code for each search result:

<input type="checkbox" class="lovkrav_checkbox checkbox_search" name="lovkrav['.$lovkrav_id.']" value="'.$lovkrav_id.'" orig-id="lovkrav'.$lovkrav_id.'" id="lovkravs'.$lovkrav_id.'" '.$checked.'/>

and there is a twin checkbox already on website with the same name but with different id. By using "orig-id" property I am getting the id of the twin checkbox. Both checkboxes have same class lovkrav_checkbox.

I came to the point where the click event is detected by the twin checkbox as it should but not the checkbox you clicked on! Here is the code:

 $(document).on("click",".lovkrav_checkbox",function(e){
    toggle_id = document.getElementById($(this).attr("orig-id"));        
    $(toggle_id).trigger("click");
});

What I want to achieve is when a user clicks on one checkbox - the twin checkbox (the one with same name property) will be checked/unchecked as well.

What am I doing wrong?

So I have a ajax search form which gives results with a checkbox: Here is part of PHP code for each search result:

<input type="checkbox" class="lovkrav_checkbox checkbox_search" name="lovkrav['.$lovkrav_id.']" value="'.$lovkrav_id.'" orig-id="lovkrav'.$lovkrav_id.'" id="lovkravs'.$lovkrav_id.'" '.$checked.'/>

and there is a twin checkbox already on website with the same name but with different id. By using "orig-id" property I am getting the id of the twin checkbox. Both checkboxes have same class lovkrav_checkbox.

I came to the point where the click event is detected by the twin checkbox as it should but not the checkbox you clicked on! Here is the code:

 $(document).on("click",".lovkrav_checkbox",function(e){
    toggle_id = document.getElementById($(this).attr("orig-id"));        
    $(toggle_id).trigger("click");
});

What I want to achieve is when a user clicks on one checkbox - the twin checkbox (the one with same name property) will be checked/unchecked as well.

What am I doing wrong?

• javascript
• jquery
• ajax
• checkbox
• forms

• 1 i dont understand what you are trying to do, please edit your question and clarify. – Math chiller Commented Jun 25, 2014 at 12:04
• What I want to achieve is when a user clicks on one checkbox - the twin checkbox (the one with same name property) will be checked/unchecked as well. – trojan Commented Jun 25, 2014 at 12:09
• @trojan The pitfall here is if your page loads up with one of the checkboxes checked.. is that a possible situation? in that case you'd want every click to check the unchecked and unchecked the checked? – webkit Commented Jun 25, 2014 at 12:21

4 Answers 4

Would be easier to toggle the checked state with vanilla javascript.

HTML

<input type="checkbox" name="test">
<input type="checkbox" name="test">

JS

//All of the checkboxes
var $checkboxes = $("input[type=checkbox][name=test]");

//The event handler
$checkboxes.on("click", function() {
    //Get the state of the check box you clicked
    var checkedState = this.checked

    //Make it the state of all the checkboxes
    $checkboxes.each(function() {
        this.checked = checkedState;
    });
});

Here is the fiddle

You can try this:

DEMO

 $(document).on("click",".check",function(e){
    $("."+this.className).prop("checked", this.checked);
 });

Try this too:

js:

 $(document).on("click",".lovkrav_checkbox",function(e){
    toggle_id = $(this).attr("name");
     isChecked = $(this).prop("checked");
     $("input:checkbox").each(
         function(){

             if($(this).attr("name") == toggle_id && isChecked){
                 $(this).prop("checked",true);
             }
             else{
                 $(this).prop("checked",false);
             }
         });
});

fiddle

Try this

$("input[type=checkbox][name=test]").prop("checked",true);