如何用不同名稱的複選框更改CSS？

目前，我有多個複選框輸入具有分配給輸入的不同名稱（checkit，checktype，checklog）。我想要做的是讓每個複選框在選中時更改背景的顏色。但是，我不知道如何分配每個複選框來執行一些任務而不復制下面的代碼？如果可能，一些示例或提示將會很棒！我很想聽到你的消息。如何用不同名稱的複選框更改CSS？

如果我想讓所有輸入都做同樣的事情，我應該刪除name =「checkit」嗎？如果我想讓他們做一些稍微不同的事情呢？

$('input[name="checkit"]').change(function() { 
     if ($(this).prop('checked')) { 
      $(this).parent().parent().addClass('alterBackground'); 
     } else { 
      $(this).parent().parent().removeClass('alterBackground'); 
     } 
    });

來源

2017-10-11 Tony

添加類每參考，而不是尋找的名字 –

添加由以下，或給予一定的類名稱，以它

$('input[name="checkit"], input[name="checktype"], input[name="checklog"]').change(function() { 
    if ($(this).prop('checked')) { 
     $(this).parent().parent().addClass('alterBackground'); 
    } else { 
     $(this).parent().parent().removeClass('alterBackground'); 
    } 
});

來源

2017-10-11 06:56:24 PraveenKumar

您可以選擇刪除name部分和input[type='radio']加選擇。如果你想添加一些不同的邏輯（我認爲你的意思是不同的類），你可以得到當前選中的複選框的名稱並用它來創建你的邏輯。這樣

$('input[type="radio"]').change(function() { 
    var checkboxName = $(this).prop('name'); 

    // if(checkboxName === .....) 

});

根據評論更新的東西

$('input[name="checkit"], input[name="checktype"], input[name="checklog"]').change(function() { 
    var checkboxName = $(this).prop('name'); 

    // ............. 
});

來源

2017-10-11 06:50:12

什麼，如果我只希望有一定的投入名字做什麼？怎麼可能？ – Tony

您需要像'$（'input [name =「1」]，輸入[name =「2」]'）'一樣使用分隔符選擇器。這隻返回具有給定選擇器的元素 –

將它作爲一個類。例如你可以在jquery中引用$（'input.checkit） –

不要使用jQuery中的name atrribute並添加普通類每個複選框爲一個共同的功能，並與類訪問它如下所示，在jQuery中選擇器。

如果你想做一些不同的複選框，除此之外，那麼你可以添加更多的jQuery代碼爲特定的輸入標籤。它不會影響這段代碼。

$('input.someClass').change(function() { 
     if ($(this).prop('checked')) { 
      $(this).parent().parent().addClass('alterBackground'); 
     } else { 
      $(this).parent().parent().removeClass('alterBackground'); 
     } 
});

來源

2017-10-11 06:54:49

$('input[type="checkbox"]').change(function() { 
     if ($(this).prop('checked')) { 
      $(this).parent().parent().addClass('alterBackground'); 
     } else { 
      $(this).parent().parent().removeClass('alterBackground'); 
     } 
    });

來源

2017-10-11 07:05:42

使用

$（ '輸入[類型= 「複選框」]'）

而不是

$（「輸入[名稱=‘checkit’]」）

來源

2017-10-11 10:24:07

如何用不同名稱的複選框更改CSS？

回答

相關問題