Question

所以我有一个ajax搜索表单，它给出了一个带有复选框的结果：以下是每个搜索结果的PHP代码的一部分：

<input type="checkbox" class="lovkrav_checkbox checkbox_search" name="lovkrav['.$lovkrav_id.']" value="'.$lovkrav_id.'" orig-id="lovkrav'.$lovkrav_id.'" id="lovkravs'.$lovkrav_id.'" '.$checked.'/>

并且网站上已经存在一个具有相同名称但ID不同的双胞胎复选框。通过使用“ orig-id ”属性，我获得了双复选框的ID。两个复选框都具有相同的类 lovkrav_checkbox 。

我发现双击复选框会检测到点击事件，但不是您点击的复选框！这是代码：

 $(document).on("click",".lovkrav_checkbox",function(e){
    toggle_id = document.getElementById($(this).attr("orig-id"));        
    $(toggle_id).trigger("click");
});

我想要实现的是当用户点击一个复选框时 - 也会选中/取消选中双复选框（具有相同名称属性的复选框）。

我做错了什么？

Answer 1

使用vanilla javascript更容易切换已检查状态。

<强> HTML

<input type="checkbox" name="test">
<input type="checkbox" name="test">

<强> JS

//All of the checkboxes
var $checkboxes = $("input[type=checkbox][name=test]");

//The event handler
$checkboxes.on("click", function() {
    //Get the state of the check box you clicked
    var checkedState = this.checked

    //Make it the state of all the checkboxes
    $checkboxes.each(function() {
        this.checked = checkedState;
    });
});

以下是fiddle

Answer 2

你可以试试这个：

DEMO

 $(document).on("click",".check",function(e){
    $("."+this.className).prop("checked", this.checked);
 });

Answer 3

试试这个：

JS：

 $(document).on("click",".lovkrav_checkbox",function(e){
    toggle_id = $(this).attr("name");
     isChecked = $(this).prop("checked");
     $("input:checkbox").each(
         function(){

             if($(this).attr("name") == toggle_id && isChecked){
                 $(this).prop("checked",true);
             }
             else{
                 $(this).prop("checked",false);
             }
         });
});

fiddle

Answer 4

试试这个

$("input[type=checkbox][name=test]").prop("checked",true);

如何选中2个具有相同名称的复选框

4 个答案: