都張貼選中和未選中的複選框

我試圖做出一系列Web表單中的複選框，將張貼的不是「真」或「假」到下一個PHP頁面，這取決於它們是否被選中。我決定每個複選框（值=「true」），我會有一個隱藏的複選框（值=「假」），將永遠是相反的（當複選框被選中時，隱藏複選框未選中等）。我正在使用jQuery去做這個。都張貼選中和未選中的複選框

「TD」的元素數是未知的（以下簡稱「TD」可以被克隆的使用按鈕，提交多個值無限次）。爲了測試目的，我將警報添加到了jQuery中。

當我加入了jQuery代碼和隱藏複選框，爲我的源代碼（我把它用於測試目的可見），該代碼將無法工作，我所有的網頁上其他的jQuery停止工作！

jQuery代碼：

$(document).ready(function(){ 
    /***post all 'required' checkboxes instead of just checked ones***/ 
    $(".required").click(function(event){ 
     event.preventDefault(); 
     alert("test"); 
     nextIndex = this.index() + 1; 
     alert(nextIndex); 
     $(".required:eq(nextIndex)").attr("checked", !.required:eq(nextIndex).attr("checked")); 
    }); 
});

HTML：

<td> 
    <input type="checkbox" class="required" name="required[]" value="true"> 
    <input type="checkbox" class="required" name="required[]" value="false" style="display: none;" checked> 
</td>

來源

2012-07-25 torjinx

這聽起來像一個工作，更適合比複選框單選按鈕。 – lbstr 2012-07-25 19:34:45

此行可能是造成事情打破：

$(".required:eq(nextIndex)").attr("checked", !.required:eq(nextIndex).attr("checked"));

你大概的意思是：

$(".required:eq(" + nextIndex + ")").attr("checked", !$('.required:eq(' + nextIndex + ')').attr("checked"));

另請注意，您需要從引號中取nextIndex。

我的猜測是，你的JavaScript控制檯會拋出一些錯誤與此有關。

編輯：

另一個錯誤，我注意到的是：

nextIndex = this.index() + 1;

.index()是一個jQuery函數必須jQuery對象上調用。 this是被點擊的元素，所以你需要說：

nextIndex = $(this).index() + 1;

順便說一句，你可能想看看jQuery's .next() function.這將節省你這一切nextIndex魔神的。

來源

2012-07-25 19:31:29 lbstr

那麼我的網頁上的其他jQuery現在正在工作，所以太過於關心我的任何語法錯誤 - 謝謝！但是，它仍然沒有按照我希望的方式工作。當我點擊複選框時，我會看到第一條警報消息，但不會看到第二條警告消息，然後該複選框會再次取消選中。隱藏的複選框沒有任何反應（它仍然被選中）。 – torjinx 2012-07-25 20:32:34

你不必隱藏複選框之一。下面是應該完成你想要的一個解決方案：

<input type="hidden" name="required" value="false" /> 
<input type="checkbox" name="required" value="true" />

如果沒有選中該複選框，則隱藏字段將與false值提交。如果複選框被選中，則複選框中的true值將覆蓋隱藏輸入中的false值。

只要你能說出每個複選框的東西稍有不同，它應該工作。

以下應該工作以及對值的數組：

<input type="hidden" name="required[0]" value="false" /> 
<input type="checkbox" name="required[0]" value="true" /> 

<input type="hidden" name="required[n]" value="false" /> 
<input type="checkbox" name="required[n]" value="true" />

這樣，你不需要任何客戶端JavaScript來切換隱藏的複選框。

來源

2012-07-25 19:33:00 drew010

是的，解決方案是在每個複選框之前用複選框的「off」值輸出一個'hidden'元素。選中複選框會導致發佈「開」值而不是隱藏的輸入值。 – meagar 2012-07-25 19:33:50

這是一個很好的解決方案，但是我不知道會有多少個複選框......我會看看我是否可以找到一種方法，當它們使用我的網頁上的按鈕添加時，會自動命名它們。 – torjinx 2012-07-25 20:35:15

只要您在複選框元素之前添加一個與DOM *中的複選框具有相同名稱的隱藏輸入，只要您有一個隱藏輸入，並且每個複選框具有相同的名稱，就應該可以工作。如果隱藏的輸入在複選框後以意外的方式作爲節點*添加到DOM，則會產生相反的效果，並且該值始終爲假（隱藏輸入的值）。 – drew010 2012-07-25 21:26:49

如果你命名你的複選框這樣，你不一定有一個索引一起工作：

<input type="checkbox" name="checkbox_name[]" />

然後這個片段的jQuery應該爲你工作，假設你是依靠OK JavaScript的。

$('form').submit(function(){ 

    $(":checkbox:not(:checked)").each(function(element, index){ 
     $(this).attr({value: 'false', checked:'checked'}); 
    }); 

    return true; 
});

這遍歷所有選中的複選框，檢查它們，並將它們的價值false。這裏是你在PHP中得到什麼：

[checkbox_name] => Array 
    (
     [0] => off 
     [1] => on 
     [2] => off 
    )

相反的：

[checkbox_name] => Array 
    (
     [0] => on 
    )

來源

2012-08-17 23:21:11

都張貼選中和未選中的複選框

回答

相關問題