ボタンが表示されていない場合は、ボタンのテキストを変更しますか？

Question

データベースの検索フィールドに使用されているチェックボックスのリストがあります。誰かがチェックボックスをクリックすると、そのチェックボックスのラベルにあるテキストのボタンが表示されます。しかし、ボタンが隠れている場合は、そのボタンを非表示にする必要があります（誰かがボタンを隠すためにチェックボックスをクリックした場合）。

ここに私のコードがあります：私はボタンがここでの例にあるチェックボックスの前に隠された滞在することはできませんが、それは私の完全な問題ではありませんいくつかの理由

$(document).ready(function() { 
 
    $('#locationAll').click(function() { 
 
    var value = $('#locationAll').parent().text(); 
 
    $('#location-all-button').html(value + " ×").toggle('fast'); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $('.search-popup').click(function() { 
 
    $(this).hide('fast'); 
 
    }); 
 
    if ($('.search-popup').css('display') == 'none') { 
 
    $(this).text(""); 
 
    }; 
 
});

button { 
 
    background-color: lightgray; 
 
    border-radius: 20px; 
 
    display: none; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="checkbox" value="all" id="locationAll" />All 
 
</label> 
 
<br> 
 
<br> 
 
<button class="search-popup btn" id="location-all-button"></button>

コード。もっと情報が必要な場合は、私が何かを見逃している可能性があることを知らせてください。

Answer 1

[OK]をので、私はいくつかのことを変更しました。私はこの作業を、私が本当に素早く行った命名規則に従ったチェックボックスのために作った。スキームは、ボタンのid = "ボタン - " + idです。また、私はすべてのボタンを隠すクラスの右のフォームをデフォルトの状態を設定するフォームを開始します。あなたがボタンを作成し、削除したい場合は、チェックボックスの状態が変更されたときの状態が、その意味するものであれば

$(document).ready(function() 
{ 
    \\change to allow all checkboxes to trigger 
    $('input[type=checkbox]').click(function() 
    { 
     \\change the id so it match a button when add "button-" to the start 
     \\this allows me to target the matching button with any chechbox 
     $('#button-'+$(this).attr('id')).toggle('fast'); 
    }); 
    $('.search-popup').click(function() 
    { 
     $(this).hide('fast'); 
     \\ sets the check box to false so it not checked when you close it 
     $("#"+$(this).text().replace("  ×","")).attr('checked', false); 
    }); 

    \\hides all buttons right form the start 
    $('button.search-popup').each(function() 
    { 
     $(this).hide(); 
    }); 
}); 

<label> 
    <input type="checkbox" value="all" id="All" />All 
</label> 
<br> 
<br> 
<button class="search-popup btn" id="button-All">All &ensp;&times;</button> 

は、今あなたが追加することができ、一致するidを持つボタンが存在するかどう、！$（タグ）を参照してチェックします。サイズ（）。