jquery - 当选择特定项目时，如何以编程方式取消选择选择器(或复选框)中的一项？

Question

我还没有决定是否要使用选择(设置为允许多个时的列表框)或一组复选框，但在任何一种情况下，用户可以选择的值之一是“全部”；这是默认情况下选择/选中的唯一值，但如果用户选择/选中任何其他值，我希望取消选择/取消选中“全部”值。另外，如果用户随后选择“所有项目/复选框”，我想取消选择/取消选中所有其他项目。我认为这是 jQuery 的工作，但不知道如何完成它......

更新

回应 jQueryRocks 提出的答案:

使用这个 html:

    <td>
        <select name="siteSelector" id="siteSelector" multiple="multiple" size="6">
            <option value="all" selected="selected" id="selectAll">All</option>
            <option class="options" value="1">1</option>
            <option class="options" value="2">2</option>
            <option class="options" value="3">3</option>
            <option class="options" value="16">16</option>
            <option class="options" value="26">26</option>
        </select>
    </td>

...还有这个 jQuery(我展示了它的全部，只是为了完整起见):

$(function () {
    AnyTime.picker("BeginDateTime");
    AnyTime.picker("EndDateTime");

$('#BeginDateTime').val(function(){
  var d = new Date();
  return d.getFullYear() + "-" + ('0' + (d.getMonth()+1)).slice(-2) + "-" + ('0' + d.getDate()).slice(-2) + " 00:00:00";
});

$('#EndDateTime').val(function(){
  var d = new Date();
  return d.getFullYear() + "-" + ('0' + (d.getMonth()+1)).slice(-2) + "-" + ('0' + d.getDate()).slice(-2) + " 23:59:59";
});

    $('input#selectAll').click(function() {
    if($(this).filter(':checked').val() !== undefined) {
        $('input.options').prop('checked', true);
    }
    else {
        $('input.options').prop('checked', false);
    }
});

});

...我仍然可以选择“全部”，然后选择其他内容，并且“全部”保持选中状态(当我按住 Ctrl 键并单击另一个值时)。我做错了什么吗？

根据您的代码，我尝试将我的 html 更改为:

    <td>
        <select name="siteSelector" id="siteSelector" multiple="multiple" size="6">
            <option value="all" selected="selected" id="selectAll">All</option>
            <option id="deselectAll" value="1">1</option>
            <option id="deselectAll" value="2">2</option>
            <option id="deselectAll" value="3">3</option>
            <option id="deselectAll" value="16">16</option>
            <option id="deselectAll" value="26">26</option>
        </select>
    </td>

...以及我的(相关的)jQuery:

$('input#deselectAll').click(function () {
        if ($(this).filter(':checked').val() !== undefined) {
            $('input#selectAll').prop('checked', false);
        }
    });

...但这也行不通。

更新2

我也尝试过这个，对于复选框的表演，没有效果:

html:

<td>
    <INPUT NAME="sites" TYPE="CHECKBOX" VALUE="all">All
    <BR>
    <INPUT NAME="sites" TYPE="CHECKBOX" VALUE="1" id="options">1
    <BR>
    <INPUT NAME="sites" TYPE="CHECKBOX" VALUE="2" id="options">2
    <BR>
    <INPUT NAME="sites" TYPE="CHECKBOX" VALUE="3" id="options">3
    <BR>
    <INPUT NAME="sites" TYPE="CHECKBOX" VALUE="16" id="options">16
    <BR>
    <INPUT NAME="sites" TYPE="CHECKBOX" VALUE="26" id="options">26
    <BR>
</td>

jQuery:

$('input.options').click(function() {
    var allChecked = true;
    var allUnchecked = true;
    $('input.options').each(function() {
        if($(this).filter(':checked').val() === undefined) {
            allChecked = false;
        }
        else if($(this).filter(':checked').val() !== undefined) {
            allUnchecked = false;
        }
    });
    if(allChecked) {
        $('input#selectAll').prop('checked', true);
    }
    else if(allUnchecked) {
        $('input#selectAll').prop('checked', false);
    }
});

...所以我用这个替换了 jQuery:

$('input#options').click(function () {
        var anyOptionsChecked;
        $('input#options').each(function () {
            if ($(this).filter(':checked').val() !== undefined) {
                anyOptionsChecked = true;
            }
        });
        if (anyOptionsChecked) {
            $('input#selectAll').prop('checked', false);
        }
    });

...但这也行不通。

“if ($(this).filter(':checked').val() !== undefined) {”行应该改为:

if($(this).filter(':checked').val() == checked) {

-或:

if($(this).filter(':checked').val() === checked) {

-还是其他什么东西？

Answer 1

我不确定这是否是您想要实现的目标，请查看此链接作为示例:http://jsfiddle.net/z5sCU/3/

HTML

<select name="siteSelector" id="siteSelector" multiple="multiple" size="6">
  <option class="options" value="all" >All</option>
  <option class="options" value="1">1</option>
  <option class="options" value="2">2</option>
  <option class="options" value="3">3</option>
  <option class="options" value="16">16</option>
  <option class="options" value="26">26</option>
</select>

Javascript:

$('#siteSelector').click(function(){
    var self = $(this);
    if(self.val() == 'all'){
        self.children().prop('selected',true).click()
    }
    else
    {
        self.find('.options:first').prop('selected', false)
    }
})

示例 2

带有复选框http://jsfiddle.net/z5sCU/8/ :

html:

<INPUT NAME="sites" TYPE="CHECKBOX" VALUE="all" class="options">All
<BR>
<INPUT NAME="sites" TYPE="CHECKBOX" VALUE="1" class="options">1
<BR>
<INPUT NAME="sites" TYPE="CHECKBOX" VALUE="2" class="options">2
<BR>
<INPUT NAME="sites" TYPE="CHECKBOX" VALUE="3" class="options">3
<BR>
<INPUT NAME="sites" TYPE="CHECKBOX" VALUE="16" class="options">16
<BR>
<INPUT NAME="sites" TYPE="CHECKBOX" VALUE="26" class="options">26
<BR>

Javascript:

$('input[type=checkbox]').click(function () {
   var self = $(this);
   if (self.val() == 'all') {
       $('input[type=checkbox]').not(':first').prop('checked', false) //.click()
   } else {
       $('input[type=checkbox]:first').prop('checked', false)
   }
 })

编辑:

更新了复选框示例，不要对复选框使用相同的id，因为这不是一个好的做法，而是将其更改为class