1

我还没有决定是否要使用选择(设置为允许多个时的列表框)或一组复选框,但无论哪种情况,用户可以选择的值之一是“全部”;这是默认选择/检查的唯一值,但如果用户选择/检查任何其他值,我希望“全部”值被取消选择/取消选中。此外,如果随后用户选择了所有项目/复选框,我想取消选择/取消选中所有其他项目。我认为这是 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) {

- 或者其他的东西?

4

3 回答 3

1

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

$('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);
    }
});
于 2013-04-30T00:03:03.823 回答
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的 's,因为这样做不是一个好习惯,而是将其更改为class

于 2013-05-01T15:57:02.827 回答
0

这有效:

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);
    });
于 2013-04-30T22:04:49.310 回答