如何在jQuery中創建多個複選框處理程序？

我有這兩個複選框：如何在jQuery中創建多個複選框處理程序？

<form action=""> 
    <input id="bikeCheckbox" type="checkbox" name="bikeCheckbox" value="Bike">I have a bike<br> 
    <input id="carCheckbox" type="checkbox" name="carCheckbox" value="Car">I have a car 
</form>

每個複選框的事件：

jQuery(function() { 
$("#carCheckbox").click(function() { 
    if($("#carCheckbox").is(":checked")) { 
     alert("it works"); 
    } 
}) 
}); 

jQuery(function() { 
$("#carCheckbox").click(function() { 
    if($("#bikeCheckbox").is(":checked")) { 
     alert("it works"); 
    } 
}) 
});

現在我想要做的就是創建一個for或某種循環創建多個複選框事件處理程序。到目前爲止，我被困在這個代碼：

jQuery(function() { 
var infoArray = ["car", "bike"]; 

for(var i = 0; i < infoArray.length; i++) { 
    var id = "#" + infoArray[i] + "Checkbox"; 

    $(id).click(function() { 
     var myCheckbox = "#" + infoArray[i] + "Checkbox; 
     if($(myCheckbox).is(":checked")) { 
      alert("it works"); 
     } 
    }) 
} 
});

任何幫助，非常感謝。

來源

2013-07-03 Mythul

使用此堆棧流程問題http://stackoverflow.com/questions/11945802/how-to-get-multiple-checkbox-value-using-jquery –

他們需要爲每個單獨的功能？因爲如果每個複選框調用相同的功能，你就會過度複雜。你能詳細解釋一下你想要的嗎？ –

我在代碼中實際上有35個複選框，我正在尋找一種方法來減少重複代碼的數量。這個想法是否有缺陷？ – Mythul

<form action=""> 
    <input id="bikeCheckbox" class="mybox" type="checkbox" name="bikeCheckbox" value="Bike">I have a bike<br> 
    <input id="carCheckbox" class="mybox" type="checkbox" name="carCheckbox" value="Car">I have a car 
</form>

$('#save_value').click(function(){ 
$('.mybox:checked').each(function(){ 
    alert($(this).val()); 
}); });

您嘗試添加類名相同永遠複選框，並使用

來源

2013-07-03 06:58:53

您不需要創建一個數組來保存所有這些值並循環這些值。而且你絕對不需要每個複選框的功能！

類添加到您要檢查你的複選框，例如：

<form action=""> 
    <input id="bikeCheckbox" class="mycheckbox" type="checkbox" name="bikeCheckbox" value="Bike">I have a bike<br> 
    <input id="carCheckbox" class="mycheckbox" type="checkbox" name="carCheckbox" value="Car">I have a car 
</form>

然後你就可以輕鬆地循環是這樣的：

jQuery(function() { 
    // Whenever any of these checkboxes is clicked 
    $("input.mycheckbox").click(function() { 
     // Loop all these checkboxes which are checked 
     $("input.mycheckbox:checked").each(function(){ 
      alert("it works"); 
      // Use $(this).val() to get the Bike, Car etc.. value 
     }); 
    }) 
});

來源

2013-07-03 06:53:45 Timmetje

使用jQuery的each功能

jQuery(function() { 
    $(":checkbox").click(function() { 
     $(':checkbox:checked').each(function(i){ 
      alert("it works"); 
      }); 
    }); 
}

來源

2013-07-03 06:55:08 DDK

如果你想通過一些分組來完成，就像你想只看到一些組中的複選框，您可以使用下面的類名稱

來源

2013-07-03 06:56:52 Raghurocks

試試這個。

<input id="chk_bikeCheckbox" type="checkbox" onclick='UpdateIdinHF(this);' name="bikeCheckbox" value="Bike"> 
<input id="chk_carCheckbox" class="mycheckbox" onclick='UpdateIdinHF(this);' type="checkbox" name="carCheckbox" value="Car"> 






function UpdateIdinHF(obj) { 
     var id = $(obj).attr('id'); 
     var name = $(obj).attr('name'); 
     var value = parseInt($(obj).attr('value')); 
     var IsChecked = $(obj).is(':checked'); 

      $('input[id*="chk_' + name + '"]').each(function() { 
       if (parseInt($(this).val()) != 0) { 
        if (IsChecked == true) { 
         $(this).attr('checked', 'checked'); 

        } 
        else { 
         $(this).removeAttr('checked'); 

        } 
       } 
      }); 

    }

來源

2013-07-03 06:56:58 Jaimin

你在找這樣的事嗎？

function bindSomeCheckboxes() { 
    var score=0; 
    var checkboxes = { 
     "id_1" : 3, 
     "id_2" : 1, 
     "id_3" : 2, 
     "id_4" : 5 
    }; 

var arrayOfIds = []; // to store array of ids 

$.each(checkboxes,function(key, val) { // populate array with ids 
    arrayOfIds.push(key); 
}); 

    // create a selector of the IDs 
$("#" + arrayOfIds.join(',#')).change(function() { 
     // alert the score 
    alert(checkboxes[ this.id ]); 
    if (this.checked) { 
     //do something when it is checked 
    } else { 
     //do something else 
    } 
});

}

來源

2013-07-03 06:58:23 Tombeau

你可以試試這個也

<script TYPE="text/javascript"> 
    jQuery(function() { 
     var infoArray = ["car", "bike"]; 

     for(var i = 0; i < infoArray.length; i++) { 
      var id = "#"+infoArray[i]+"Checkbox"; 
      $(id).click(function() { 
       if($(id).is(":checked")) { 
       alert("it works"); 
       } 
      }) 
     } 
    }); 
</script>

來源

2013-07-03 07:01:18

如何在jQuery中創建多個複選框處理程序？

回答

相關問題