Question

我还没有决定是否要使用Select（设置为允许多个时的列表框）或一组复选框，但在任何一种情况下，用户可以选择的值之一是＆＃34;所有＆＃34 ;;这是默认选择/检查的唯一值，但如果用户选择/检查任何其他值，我想要＆＃34;全部＆＃34;要取消选中/取消选中的值。此外，如果随后用户选择了所有项目/复选框，我想取消选中/取消选中所有其他项目。我认为这是jQuery的工作，但不知道如何实现它......

更新

回应jQueryRocks＆＃39;建议回答：

使用这个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（我显示所有它，仅仅是为了完整性＆＃39;缘故）：

$(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);
    }
});

});

......我仍然可以选择＆＃34;所有＆＃34;然后别的东西，＆＃34;所有＆＃34;保持选中状态（当我按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);
        }
    });

......但这也不起作用。

＆＃34; if（$（this）.filter（＆＃39;：checked＆＃39;）。val（）！== undefined）{＆＃34;换句话说：

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

-OR：

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

- 还是别的什么？

Answer 1

用于选择/取消选中所有复选框，其中id为“selectAll”的输入打开和关闭“class”选项的输入：

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

并根据单击复选框处理选择/取消选择“全部”

$('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);
    }
});

Answer 2

我不确定这是否是您想要达到的目的，请查看此链接作为示例：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

Answer 3

这有效：

HTML：

<tr>
    <td colspan="4">
        <fieldset data-role="controlgroup" data-type="horizontal" id="groupedSites">
            <legend class="labelText">Select the Sites you want to include</legend>
            <input type="button" id="selectAllSites" name="selectAllSites" value="Select All" />
            <label for="site1">1</label>
            <input type="checkbox" name="site1" id="site1" />
            <label for="site2">2</label>
            <input type="checkbox" name="site2" id="site2" />
            <label for="site3">3</label>
            <input type="checkbox" name="site3" id="site3" />
            <label for="site16">16</label>
            <input type="checkbox" name="site16" id="site16" />
            <label for="site26">26</label>
            <input type="checkbox" name="site26" id="site26" />
            <input type="button" id="deselectAllSites" name="deselectAllSites" value="Deselect All" />
        </fieldset>
    </td>
</tr>

jQuery的：

$("#selectAllSites").click(function () {
        $('#groupedSites input').attr('checked', true);
    });

    $("#deselectAllSites").click(function () {
        $('#groupedSites input').attr('checked', false);
    });

当选择特定项目时，如何以编程方式取消选择选择器（或复选框）中的项目？

更新

更新2

3 个答案: