jQuery,我如何通过选中一个复选框来调用url

时间:2012-05-04 17:15:06

标签: javascript jquery

我有这个:

<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>

并且使用jQuery我想为所有4种可能的操作调用不同的URL(1:检查facebook,2:取消检查facebook,3:检查twitter,4:取消检查twitter)。

我该怎么做?

3 个答案:

答案 0 :(得分:5)

我不确定你的目的是什么。如果要在单击复选框时重定向到页面,可以执行此操作

使用数据属性

指定要在复选框元素中调用的网址
<input type="checkbox" data-target="http://www.facebook.com" />

脚本

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

示例JsFiddle:http://jsfiddle.net/45aZ8/2/

编辑:如果您想在新窗口中打开它,请使用window.open方法而不是更新当前网址

替换

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

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

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

编辑3 基于评论:如果您想在Checked状态下加载一个网址并在取消选中时加载另一个网址,则可以这样做

为每个复选框提供2个数据属性。一个用于检查状态,一个用于未检查状态

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

脚本是

$(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"))   
  }        
 });
})

工作样本:http://jsfiddle.net/45aZ8/5/

答案 1 :(得分:0)

$('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
     }
  }
});

答案 2 :(得分:0)

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

现在你将获得$ _POST id_connected_to_facebook或id_connected_to_twitter,作为一个值,它将是1或0