1

選択 (複数を許可するように設定されている場合はリストボックス) を使用するか、一連のチェックボックスを使用するかはまだ決めていませんが、いずれの場合も、ユーザーが選択できる値の 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

これがあなたが達成したいことかどうかわかりません。例としてこのリンクを確認してください: 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

于 2013-05-01T15:57:02.827 に答える
1

すべてのチェックボックスを選択/選択解除する場合、id "selectAll" を持つ入力は、クラス "options" の入力をオンまたはオフにします:

$('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 に答える
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 に答える