jQuery的：設置複選框的值

-3

如果我有一列3個複選框的onclick任何複選框，我想設置複選框的值在整列（未行）jQuery的：設置複選框的值

如果複選框中的第2列選中/取消選中，我想要選中/取消選中同一列（第二列）中的所有其他複選框。

這就是我想實現的代碼::

var a =$j('#table tr').length; 
$j("input[type='checkbox']").change(function() { 
    var ch = this.checked; 
    if checked checkbox is in 2nd column , all the checkboxes in the 2nd column(td) should be checked (row length varies not static) 
});

來源

2017-06-14 MGD

你能提供代碼樣本和您正在使用的jQuery的版本嗎？ – admcfajn

這應該有所幫助：https://stackoverflow.com/questions/15330765/how-to-check-all-checkboxes-of-parents-siblings-on-click-with-jquery – admcfajn

請[編輯]你的問題，以顯示您的HTML樣本。這種行爲可以通過jQuery很多方式輕鬆實現，因此以HTML爲出發點可以讓人們提出最適合您的結構的方式。 – nnnnnn

您可以使用.index() method來確定哪個列被點擊。

在點擊處理程序中，this是點擊複選框，因此$(this).closest("td").index()會爲您提供其行中包含td的從零開始的索引。

然後，您可以使用nth-child() selector（從一個，而不是零）來獲取該列中的所有項目。

你沒有顯示你的HTML，所以我編寫的基於一個非常簡單的<table>結構，你可以看到以下內容：

var table = $("table").on("click", ":checkbox", function() { 
 
    var column = $(this).closest("td").index() + 1 
 
    table.find("td:nth-child(" + column + ") :checkbox").prop("checked", this.checked) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table> 
 
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr> 
 
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr> 
 
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr> 
 
    <tr><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td><td><input type="checkbox"></td></tr> 
 
</table>

來源

2017-06-14 04:54:19 nnnnnn

我已經能夠達到共享的效果了：但是我想只在複選框的行包含特定文本值時才更改複選框值。我嘗試了下面的代碼。但失敗： var table = $ j（「#table tr td：contains（'Test'）」）。on（「click」，「：checkbox」，function（）{var column = $ j（this）.closest（「td」）。index（） + 1; table.find（「td：nth-child（」+ column +「）：checkbox」）。prop（「checked」，this.checked）; }）; – MGD

如果我理解正確的話，你想要的複選框要麼檢查或在同一時間選中的所有3。這應該適合你。

$(document).on('click', '.class1, .class2, .class3', function(){ 
    var checked = $(this).prop('checked'); 
    if(checked === true) { 
     $('.class1, .class2, .class3').prop('checked', true); 
    } 
    else { 
     $('.class1, .class2, .class3').prop('checked', false); 
    } 
});

只要記住要將'.class1，.class2，.class3'更改爲您正在使用的任何類。

來源

2017-06-14 04:30:56 ottiem

'this.checked'比'$（this）.prop（'checked'）'更容易閱讀，輸入速度更快，執行速度更快。你可以用一行代替整個函數：$（'。class1，.class2，.class3'）。prop（'checked'，this.checked）;'。但無論如何，這個答案不會將CB更新限制在當前列的複選框中。 – nnnnnn

所有非常有效的點，謝謝！ – ottiem

這是我試圖實現的代碼 var a = $ j（'＃table tr'）。length; $ j（「input [type ='checkbox']」）。change（function（）{ \t var ch = this.checked; \t如果選中複選框位於第二列，則第二列中的所有複選框應爲檢查（行長度不固定） }）; – MGD

按照jQuery的文檔，根據您的版本，這可能需要調整才能正確使用。 https://api.jquery.com/prop/

<div class="column">check one: 
    <input type="checkbox" value="a"> 
    <input type="checkbox" value="b"> 
    <input type="checkbox" value="c"> 
</div> 
<script> 
$("input[type='checkbox']").click(function(){ 
    var checked = $(this).prop("checked"); 
    // console.log(checked,typeof checked); 
    if(checked === true){ 
    $(this).siblings("input[type='checkbox']").prop("checked",true); 
    }else{ 
    $(this).siblings("input[type='checkbox']").prop("checked",false); 
    } 
}); 
</script>

我用.siblings這裏，但還有許多其他的方式來做到這一點。

編輯：從@ottiem

$("input[type='checkbox']").click(function(){ 
    $(this).siblings("input[type='checkbox']").prop("checked",this.checked); 
});

note使用輸入的是this.checked上面使用的JavaScript的this，沒有jQuery的$(this)

來源

2017-06-14 05:08:19 admcfajn

jQuery的：設置複選框的值

回答

相關問題