許多複選框隱藏/顯示相應的DIV的JQuery

我的頁面上有大量的表單元素。我有114行12個文本框。每行文本框都有一個複選框，如果選中，將隱藏文本框行。許多複選框隱藏/顯示相應的DIV的JQuery

我正在使用下面的代碼來切換行div。

$(".chk201P").click(function(){ 
$("#hide201P").toggle(!this.checked); 
}).triggerHandler('click'); 

$(".chk201M").click(function(){ 
$("#hide201M").toggle(!this.checked); 
}).triggerHandler('click');

以上代碼爲2行。 chk201P和chk201M是複選框，hide201P和hide201M是它們隱藏的DIV（如果選中）。

**編輯：審查意見後，我略微重新設計了頁面。我現在使用下面的代碼來突出顯示我想要隱藏的部分。這是基於我在JQuery API網站上找到的代碼。

$("form input:checkbox").wrap('<span></span>').parent().parent().siblings('.typentry').css({background:"yellow", border:"1px red solid"});

遵循這個邏輯，我試圖用下面的方法使DIV隱藏並返回基於複選框，但它不工作。

$("form input:checkbox").click(function() { 
$(this.parent().parent().siblings('.typentry')).toggle(!this.checked);

}）。triggerHandler（'click'）;

任何人都可以告訴我哪裏出了錯代碼？

**結束EDIT

鑑於行和文本框的量，是否有寫JQuery的，而不是重複上面的代碼46次以上用於相應數據的更簡單的方法？

Old Example page New Example page

來源

2011-10-18 Jeremy DeStefano

你可以發佈一個HTML結構的例子嗎？ –

添加示例頁面。 –

更新了問題併發布了新的示例頁面。 –

解決....

$("form input:checkbox").click(function() { 
    var dataID = $(this).attr("id"); 
    $("#hide" + dataID).toggle(!this.checked); 
    $("#nor" + dataID).toggle(this.checked); 
    //return false; 
}).triggerHandler('click');

爲了解釋...

94個複選框中的每一個都是由一個循環生成的，從一個DB中提取信息。每個循環都會提取該特定的行ID。複選框的名稱與這些ID相匹配。就我而言，201P到247P和201M到247M。我要隱藏的文本框被賦予一個「hide + ID」或hide201P等ID。這個nor也不是我隱藏另一個時顯示的div，並且它的ID爲nor201P等等。當複選框被選中時，隱藏DIV被隱藏並且不顯示DIV。

感謝Bob讓我走上正軌。

來源

2011-10-20 16:21:07

爲什麼不採用同樣的功能，每一個複選框？如果我理解正確，你想隱藏父行？

$('input[type=checkbox]').click(function(){ 
    $(this).parent('tr').toggle($(this).is(':checked')); 
});

此代碼未經測試，但我希望它能給你一個想法。

編輯：添加了'$（this）.is（'：checked'）'，因此它只會隱藏行是複選框被選中。

編輯完之後的代碼示例：好吧，我只是看着你的代碼。請解釋我一件事，因爲我無法弄清楚。你用div和span構建整個表格。這是爲什麼？爲什麼不使用普通表格？（我知道有很多原因，但我不知道你的是什麼）。但是真正讓我震驚的是，在頁面底部，你確實使用了一個表格來將2個錨點標記對齊在一起。爲什麼不在這裏使用div？

此外，我想建議你再看看你的HTML。如果您想要使用jQuery，可以更輕鬆地將受影響的1行動的dom元素放在同一個div中。我會在下面發佈一個例子。這是因爲用選擇器更容易找到這些元素。

Example: (wrong way) 
<div> 
    <input type="checkbox"> 
</div> 
<div> 
    <input type="text"> 
</div> 

(right way, atleast for me) 
<div> 
    <input type="checkbox"> 
    <input type="text"> 
</div>

我希望我有足夠的瞭解你。如果你有任何問題。請隨時問^^。

來源

2011-10-18 16:46:20 Bob

我對JQuery相當陌生，所以原諒我。當你說應用相同的功能時，你的意思是這個代碼應該放在每個複選框中，否則這個代碼應該適用於每個複選框，如果在Document Ready上加載的話？ –

我上面使用的示例代碼不適用於您的網站。這是因爲你有其他的HTML佈局，然後是這段代碼寫的。請閱讀我編輯的部分。 – Bob

該頁面最初是使用表格構建的，我無法按照自己想要的方式獲取格式。底部的鏈接仍然在表格中，因爲我還沒有切換它們。在我擔心這些小東西之前，我試圖讓功能失效。 –

許多複選框隱藏/顯示相應的DIV的JQuery

回答

相關問題