I have this:

<span id="social">
    Facebook:
    <input id="id_connected_to_facebook" type="checkbox" name="connected_to_facebook">
    <br>
    Twitter:
    <input id="id_connected_to_twitter" type="checkbox" name="connected_to_twitter">
    <br>
</span>

and with jQuery I would like to call a different URL for all the 4 possible actions (1: check facebook, 2: uncheck facebook, 3: check twitter, 4: uncheck twitter).

How would I do that?

I have this:

<span id="social">
    Facebook:
    <input id="id_connected_to_facebook" type="checkbox" name="connected_to_facebook">
    <br>
    Twitter:
    <input id="id_connected_to_twitter" type="checkbox" name="connected_to_twitter">
    <br>
</span>

and with jQuery I would like to call a different URL for all the 4 possible actions (1: check facebook, 2: uncheck facebook, 3: check twitter, 4: uncheck twitter).

How would I do that?

• javascript
• jquery

• Don't use onchange method. It's going crazy in MSIE – core1024 Commented May 4, 2012 at 17:25

3 Answers 3

I am not sure what you are going for. If you want to redirect to a page on clicking on the check box you can do this

Specify what url you want to call in your checkbox element using data attribute

<input type="checkbox" data-target="http://www.facebook." />

Script is

$(function(){
  $("input[type='checkbox']").change(function(){
  var item=$(this);    
  if(item.is(":checked"))
  {
    window.location.href= item.data("target")
  }    
 });
});

Sample JsFiddle : http://jsfiddle/45aZ8/2/

EDIT : If you want to open it in a new window, use window.open method instead of updating the current url

Replace

window.location.href= item.data("target")

with

window.open(item.data("target")

http://www.w3schools./jsref/met_win_open.asp

EDIT 3 : Based on ment : If you want to load one url on Checked state and load another url on uncheck, you can do like this

Give 2 data attributes for each checkbox. One for checked state and one for unchecked

Facebook<input type="checkbox" data-target="http://www.facebook." data-target-off="http://www.google."  /> <br/>
Twitter<input type="checkbox" data-target="http://www.twitter." data-target-off="http://www.asp"  /> <br/>

And the script is

$(function(){
  $("input[type='checkbox']").change(function(){
  var item=$(this);    
  if(item.is(":checked"))
  {
       window.open(item.data("target"))   
  }
  else
  {
      window.open(item.data("target-off"))   
  }        
 });
})

Working sample : http://jsfiddle/45aZ8/5/

$('input[type="checkbox"]').change(function() {
  if($(this).is(':checked')) {
     if($(this).attr('id') == 'connected_to_facebook') {
        // possibility: 1
     } else {
       // possibility: 3
     }
  } else {
    if($(this).attr('id') == 'connected_to_facebook') {
       // possibility: 2
     } else {
       // possibility: 4
     }
  }
});

$('#id_connected_to_facebook, #id_connected_to_twitter').click(function(){
   $.post('http://target.url', {this.id:this.checked});
});

now you'll get in $_POST either id_connected_to_facebook or id_connected_to_twitter and as a value it would be 1 or 0