jQuery-打开并检查单选按钮onclick

Question

我有一些单选按钮可以过滤网页上的数据，这些单选按钮对我来说绝对正常，但我无法对该单选按钮执行检查...

<input id="radio1" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=bank-manager'>
<label for="radio1">bank manager</label><br><br>

<input id="radio2" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=ceo'>
<label for="radio2">ceo</label><br><br>

<input id="radio3" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=company-head'>
<label for="radio3">company head</label>

我使用jquery打开并在单选按钮单击上执行检查。

jQuery的：

$(document).ready(function() {
    $('input[type=radio]').click(function() {
        window.location=$(this).attr('data-href');
    });
    // parse the url:
    var scat = window.location.search.match(/scat=(\w+)/)[1];
    if (typeof scat !== 'undefined') {
        // update the correct radio button:
        $('input[value="' + scat + '"]').prop("checked", true);
    }
});

在使用以上查询的情况下，如果我单击“ ceo”单选按钮，它对我来说非常好，即它为我过滤内容并也执行检查...另一方面，如果我单击银行经理或公司负责人。 它只过滤内容..它不执行检查...任何帮助？

提前致谢...

注意： data-href在银行经理和公司负责人的网址中包含“-”的网址，在标签字段中，银行经理和公司负责人均不含“-”。

Answer 1

您可以按如下所示将& （值（在URL中使用错误的符号，即&&））作为data属性，

您目前拥有，

<input id="radio1" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=bank-manager'>
<label for="radio1">bank manager</label><br><br>

添加data-scat属性以获取scat值，并且还可以基于value获得点击，

<input id="radio1" type="radio" name="scat" value="bank-manager" data-scat="bank-manager" data-href='vlist.php?cat=xyz'>
<label for="radio1">bank manager</label><br><br>

在jQuery中，您应按以下方式访问它并在URL中附加，

$(document).ready(function() {
    $('input[type=radio]').click(function() {
       window.location=$(this).data('href')+"&scat="+$(this).data('scat');
    });

    // parse the url:
    var hrefLink = window.location.search;
    // update the correct radio button:
    $('input[value=' + hrefLink.substring(hrefLink.indexOf("scat")+5) + ']').prop("checked", true);
 // } Commenting an extra closed bracket
 });

Answer 2

您正则表达式需要进行修改，以获取-还需要改变选择的属性与选择结束

 var search = "?cat=xyz&scat=bank-manager"; //replace with window.location.search var scat = search.match(/scat=([\\w-]+)/); if (scat && scat[1]) { // update the correct radio button: $('input[data-href$=' + scat[1] + ']').prop("checked", true); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="radio1" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=bank-manager'> <label for="radio1">bank manager</label> <br> <br> <input id="radio2" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=ceo'> <label for="radio2">ceo</label> <br> <br> <input id="radio3" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&scat=company-head'> <label for="radio3">company head</label> 

Answer 3

您尚未为单选输入标签指定正确的值，而是在jQuery选择器中使用值，只需为其添加正确的值即可正常工作。

它应该是

<input id="radio1" type="radio" name="scat" value="bank-manager" data-href='vlist.php?cat=xyz&&subcat=bank-manager'>

装的

<input id="radio1" type="radio" name="scat" value="1" data-href='vlist.php?cat=xyz&&subcat=bank-manager'>

 $(document).ready(function() { $('input[type=radio]').click(function() { window.location = $(this).attr('data-href'); }); // parse the url: var search = "vlist.php?cat=xyz&subcat=company-head"; // uncomment this line and comment below one // var scat = window.location.search.match(/bcat=([\\w-]+)/)[1]; var scat = search.match(/bcat=([\\w-]+)/)[1]; if (typeof scat !== 'undefined') { // update the correct radio button: $('input[value="' + scat + '"]').prop("checked", true); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="radio1" type="radio" name="scat" value="bank-manager" data-href='vlist.php?cat=xyz&&subcat=bank-manager'> <label for="radio1">bank manager</label> <br> <br> <input id="radio2" type="radio" name="scat" value="ceo" data-href='vlist.php?cat=xyz&&subcat=ceo'> <label for="radio2">ceo</label> <br> <br> <input id="radio3" type="radio" name="scat" value="company-head" data-href='vlist.php?cat=xyz&&subcat=company-head'> <label for="radio3">company head</label>