CODEWITHSUNDEEP
javascriptjquerycheckbox
Alexander Prokein
Alexander Prokein

Reputation: 1

jQuery - Get value of specific checkbox using iButton

<form id="blabla" method="post">
<input type="checkbox" name="test" id="iButton" value="1" class="button" />
</form>

<form id="blabla" method="post">
<input type="checkbox" name="test" id="iButton" value="1" class="button" />
</form>

$(document).ready(function (){
      $(":checkbox").iButton({
            change: function() {
                var sendData = $("input", this).val();
                var dataString = "cmd="+sendData;
                $.ajax(
                {type:"POST",
                url: "http://meinserver.com",
                data: dataString,
                success: alert(dataString)}
                );
                return false;
            }
      });
    });

Could anybody explain me how I can get the value of the checkbox which is sent? if I am using $("input", this).val() the var is undefined, if I am using instead $("input").val() I only get the value of the first checkbox.

I used the sample code from here but this returns an array of all checked checkboxes. I only want to have the specific checkbox which is changed. Thx in advance.

Upvotes: 0

Views: 523

Answers (2)

Alexander Prokein
Alexander Prokein

Reputation: 1

I am using the iButton jQuery Plug-in v1.0.03 which I don't want to miss :) I guess it is really not necessary putting the id into the input tag of the checkbox which you want to transform to the iButton. It's working without on my script.

Here is the way I found to resolve my problem.

<form id="myform" method="post">
<input type="checkbox" name="mykey" value="myvalue" id="iButton"/>
</form>

<form id="myform" method="post">
<input type="checkbox" name="mykey" value="myvalue" class="button"/>
</form>

<script type="text/javascript">
    $(document).ready(function (){
      $(":checkbox").iButton({
            change: function($input) {
                var sendData = $($input).val();
                var dataString = "cmd="+sendData;
                $.ajax(
                {type:"POST",
                url: "http://meinserver.com",
                data: dataString,
                success: alert(dataString)}
                );
                return false;
            }
      });
    });
</script>

Upvotes: 0

Dale
Dale

Reputation: 29

Here is a slightly modified version of your code. I changed each element to have a unique id and took out the ajax call. Note that I also added a parameter to the function passed to the change method called event, this is probably the easiest way to get to the checkbox that changed. -> event.target 

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
<form id="blabla1" method="post">
<input type="checkbox" name="test" id="iButton1" value="1" class="button" />
</form>

<form id="blabla2" method="post">
<input type="checkbox" name="test" id="iButton2" value="1" class="button" />
</form>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(document).ready(function (){
    $(":checkbox").change(function(event){
        alert($(event.target).is(':checked'));
    });
});
</script>
    </body>
</html>

Upvotes: -1

Related Questions