Question

好吧我的问题是我有一个包含5个元素的表。其中一个元素是复选框，另一个是锚点。当我单击锚点时，它会禁止默认操作并向锚点添加一个类。我的属性“data-name”等于复选框的名称。我需要完成以下任务。

当我点击带有data属性的锚点时，我需要选中具有相同名称的复选框。

我的代码如下。

<script>
$(document).ready(function(){
var clicks= 0;
var DELAY=700;

$("a").on("click", function(e){
    e.preventDefault();
    if($(e.target).hasClass("selected")){
       $(e.target).removeClass("selected");
    } else {
        $(e.target).addClass("selected");
    }
    clicks++;  //count clicks
if($(e.target).hasClass("selected")){
            var data_name  = $(e.target).data('name');
    if($("input[name="+data_name+']').attr('name') === data_name)
        $('input[name='+data_name+']').find('input[name='+data_name+']').prop('checked', true);

}
    if(clicks === 1) {
        timer = setTimeout(function() {
        clicks = 0;  //after action performed, reset counter

     }, DELAY);
    } else {
        clearTimeout(timer);  //prevent single-click action
    window.location = $(event.target).attr("href");
        clicks = 0;  //after action performed, reset counter
    }
});
$("a").on("dblclick", function(e){
    e.preventDefault();  //cancel system double-click event
});
});
</script>

该表看起来像附图（它看起来比可用的代码更好）。 enter image description here

示例表行是以下

<?php
   // $files is the number of files in each directory.
   for($i=0; $i<$files;$i++){
?>
<tr>
    <td>
         <input type="checkbox" name="todelete<?= $i?>" value="404.shtml">
    </td>
    <td>
         <i class="fa fa-file-text-o center"></i>
    </td>
    <td>
         <a href="http://kregelbagel.com/404.shtml" value="" data-name="todelete">404.shtml</a>
    </td>
    <td>437</td>
    <td> bytes</td>
</tr>
<?php
    }
?>

Answer 1

我仍然没有多少比特，但试试

$("a").on("click", function (e) {
    e.preventDefault();

    //use toggleClass to switch the class
    $(this).toggleClass("selected");

    clicks++; //count clicks
    if ($(this).hasClass("selected")) {
        //just use attribute equals selector to get the checkbox
        $('input[name=' + $(this).data('name') + ']').prop('checked', true);
    }
    if (clicks === 1) {
        timer = setTimeout(function () {
            clicks = 0; //after action performed, reset counter
        }, DELAY);
    } else {
        clearTimeout(timer); //prevent single-click action
        window.location = $(event.target).attr("href");
        clicks = 0; //after action performed, reset counter
    }
});

您可以使用.toggleClass()来切换课程的礼物
要查找具有给定名称的输入元素，请使用attribute equals selector

_{免责声明：Haven未经过测试，或查看为何使用代码的点击或其余部分}

Answer 2

您可以获取所点击锚点的父data的第一个兄弟的input元素，而不是获取td值，并将选中状态设置为true：

$("a").on("click", function(e){
    e.preventDefault();
    $(this).toggleClass('selected');
    clicks++;  //count clicks
    if($(this).hasClass("selected")){      
        $(this).parent().siblings('td:first').find('input').prop('checked', true);
    }
    // Rest of your code here
});

您还可以使用 .toggleClass() 代替if和else声明来缩短代码。

Jquery在元素有类时选中一个复选框

2 个答案: