如何使用复选框在同一按钮上的链接之间切换

how to use check box to toggle between links on the same button?

本文关键字：链接 之间 按钮 复选框 何使用      更新时间：2023-09-26
如何使用 HTML

复选框在 HTML 按钮中切换两个不同的链接？（IE） 一个按钮包含两个链接。使用复选框时，如果设置为 true，则单击按钮应转到 XYZ 站点，当复选框为 false 时，单击同一按钮应转到 ABC 站点？请帮忙，因为我是j查询的新手。在共享点网站上使用它。

这可能会对你有所帮助，

$('button').on('click',function(){
    var url=$('input:checked').length ? 'abc.com' : 'xyz.com';
    alert(url);// use window.location.href=url; to open that url
});

试用演示

打开复选框更改开关链接 href：.HTML

<input type="checkbox">
<a href="#" data-url1='lala' data-url2='lolo'>button</a>

简讯

$(function(){
    $('a').attr('href',$('a').data('url1'));
    $('input').on('change',function(){
        if($(this).is(':checked')){
            $('a').attr('href',$('a').data('url2'));
        }else{
            $('a').attr('href',$('a').data('url1'));
        }
     })
})

这是正确的代码 尝试在浏览器中运行它，您甚至可以在 jsfiddle 中尝试此操作

这里使用的两个概念是如何在jquery中选中复选框或未选中，我有很多方法可以使用is（'：checked'）来说明一种方式另一个是绑定按钮的 Click 事件，这很简单。希望你喜欢。

<html>
<head>
    <title></title>
</head>
<body>
    <input type="checkbox" id="myCheckbox" />
    <button id="myButton">Click</button>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#myButton').click(function(){
                if($('#myCheckbox').is(':checked')){
                    window.location.href = "http://www.google.co.in";
                }else{
                    window.location.href = "http://jforjs.com";
                }
            })
        })
    </script>
</body>
</html>

演示

.HTML

<input id="choice" name="choice" type="checkbox" data-yes="http://www.xyz.com" data-no="http://www.abc.com"/>
<button id="submit">submit</button>

jQuery

$('#submit').on('click',function(){
var url ='';
if($('#choice').is(':checked')){
    url = $('#choice').data('yes');
}
else{
    url = $('#choice').data('no');
}
alert(url);
//Uncomment below for redirecting automatically to the desired url
//location.href = url;
});
相关文章：