jQuery複選框組

我必須爲複選框創建一些組。就像我有3個複選框'value =「group1」'，它只允許我選擇其中一個複選框，該組下的其他複選框會被取消選中。我在那裏得到了一半，所以我可以根據他們的組篩選複選框，我可以將它們設置爲false。問題在於將右側複選框的複選框值設置爲「已選中」。我想我可能會爲此使用錯誤的方法，因爲它似乎阻止了他們始終被選中......所以也許有另一種方法可以解決這個問題？jQuery複選框組

你可以看到我現在的JS提琴在這裏：http://www.jsfiddle.net/Rph8z/

來源

2011-02-01 WraithLux

爲什麼不使用單選按鈕？這就是他們的目的。如果只能選擇一個組中的一個項目，並且複選框不止一個，請使用單選按鈕。這裏是你更新的小提琴：http://www.jsfiddle.net/Rph8z/2/（他們必須有相同的名字）。 – 2011-02-01 13:49:41

必須有選擇不選擇任何東西，你不能取消選擇單選按鈕，除非你創建一個標記爲「無」的新選項，但我不喜歡那個。 – WraithLux 2011-02-01 13:52:14

爲什麼不呢？如果我不得不在一個`none`值和基本上試圖複製一些已經存在的涉及JavaScript的行爲之間進行選擇，並且在JS被禁用時不能工作，我會明確選擇none。除此之外，如果有（預選）`none`選項，用戶可能會更容易理解，但這取決於上下文。 – 2011-02-01 13:54:23

我們使用複選框，因爲我們希望允許用戶檢查多個答案

如果你想允許只有一個答案你必須使用單選按鈕。這是標準。

如果你堅持原來的方式有正確的代碼：

$(".selector").children("input:checkbox").click(function(e){ 
var test = $(this).val(); 
if($(this).attr('checked')==true) { 
    $('input[value='+test+']').each(function() { 
    $(this).attr('checked',false); 
}) 

    $(this).attr('checked',true) 
} 
});

at JSFIDDLE

來源

2011-02-01 14:06:42

由於@Felix在他的評論中指出的，您使用的是錯誤的工作工具。單選按鈕就好辦多了，和更合理的（因爲你只需要其中的一個選擇。

<input type="radio" name="radioGroup" value="1" id="radio1" /><label for="radio1">Radio 1</label> 
<input type="radio" name="radioGroup" value="2" id="radio2" /><label for="radio2">Radio 2</label> 
<input type="radio" name="radioGroup" value="3" id="radio3" /><label for="radio3">Radio 3</label> 
<input type="radio" name="radioGroup" value="4" id="radio4" /><label for="radio4">Radio 4</label>

JS Fiddle demo

來源

2011-02-01 13:53:06

我知道radiobuttons，當然，但我的例子需要使用複選框，我相信對於一個組我必須能夠選擇2個選項等...所以複選框將是唯一的方式... – WraithLux 2011-02-01 13:55:03

我會建議使用類，而不是類型的

。

<div class="selector"> 
<input type=checkbox class="serialcheck" name="hello" value="test"/> Hello 
<input type=checkbox class="serialcheck" name="bye" value="test"/> Bye 
<input type=checkbox class="serialcheck" name="no" value="test2"/> No 
<input type=checkbox class="serialcheck" name="no no" value="test2"/> No No 
</div>

真的，你只需要選擇所有，但當前射擊它的人的onclick事件：

$(".selector input.serialcheck").click(function(){ 
    var test = $(this).val(); 
    $(".selector input.serialcheck[value!="+test+"]").attr('checked', false); 
});

如果要選擇所有具有相同值的那些的，增加一個行：

$(".selector input.serialcheck").click(function(){ 
    var test = $(this).val(); 
    $(".selector input.serialcheck[value!="+test+"]").attr('checked', false); 
    $(".selector input.serialcheck[value="+test+"]").attr('checked', true); 
});

來源

2011-02-01 14:02:33

爲什麼不特林這樣的：

// now its only watch to the checkbox where the name IS NOT test 
$(".selector input[type=checkbox][name!=test]").click(function(){ 
    ** 
    $(this).attr('checked', true); 
}); 

** if you only want that there is ONE selected at all time, add this code BEFORE you set the attribute checked: 
$(".selector input[type=checkbox]:checked").removeAttr('checked'); 


// when you group by you can only use it on the name not the value 
<div class="selector"> 
    <input type=checkbox value="hello" name="test"/> 
    <input type=checkbox value="bye" name="test"/> 
    <input type=checkbox value="no" name="test2"/> 
    <input type=checkbox value="no no" name="test2"/> 
</div> 

// if you want to use it more but with different value 
$(".selector input[type=checkbox]").click(function(){ 

    var currName = $(this).attr('name'); 

    //watch if there already is a checkbox checked with the same name 
    $(".selector input[type=checkbox][name="+ currName +"]:checked").removeAttr('checked'); // or .attr('checked', false); 

    // now set the checkbox you clicked on it to true 
    $(this).attr('checked', true); 
});

來源

2011-02-01 14:09:31

這是一個更清潔的版本基於以前的答案

HTML

<input type="checkbox" class="checkboxgroup" value="1"> 
<input type="checkbox" class="checkboxgroup" value="2">

的JavaScript

$('.checkboxgroup').click(function(e){ 
    var val = $(this).val(); 
    $('input[value!='+val+'].checkboxgroup').attr('checked',false); 
});

該複選框可以在頁面上的任何地方，只要給它們的類checkboxgroup。

來源

2012-09-08 19:57:53 chrislovecnm

jQuery複選框組

回答

相關問題