jquery: unchecking checkboxes only works one way-CodePudding

I have some checkboxes on my page. if the top checkbox is checked, it unchecks all the checkboxes below. that's good!

But I also want it reversed: when one of the below checkboxes (they are generated dynamically) is checked, it unchecks the top one.

this is what I tried:

 <table>
     <tr>
         <td>
             @Html.CheckBoxFor(m => m.AllLangsChecked, new { onchange = "checkedChanged", @id = "langcheck" })
             <script>
                 $('.disableCheckboxes input:checkbox').change(function () {
                     $('.disableCheckboxes input:checkbox').not(this).prop('checked', false);
                 })

                 $('#langcheck input:checkbox').change(function () {
                     $('#langcheck input:checkbox').not(this).prop('checked', false);
                 })
             </script>
             <label>Sichtbar in allen Sprachen</label>
         </td>
     </tr>
     @for (int i = 0; i < Model.checkLangs.Count; i  )
     {
         <tr>
             <td>
                 @Html.HiddenFor(m => m.checkLangs[i].Name)
                 @Html.HiddenFor(m => m.checkLangs[i].LanguageId)
                 @Html.CheckBoxFor(m => m.checkLangs[i].isChecked, new { onchange = "checkedChanged" })
                 <label>@Model.checkLangs[i].Name</label>
             </td>
         </tr>
     }
 </table>

Again, the first part of the works, its those lines, that fail:

             $('#langcheck input:checkbox').change(function () {
                 $('#langcheck input:checkbox').not(this).prop('checked', false);
             })

So what I basically tried is giving the top-level checkbox an id: langcheck, I added the eventlistener to my checkboxes and I am trying to fire the above script. But it fails with no error. Nothing is unchecked.

What can I do here?

Best,

EDIT:

I tried what you all suggested, ran my script at the bottom of the page, and edited it a little:

<script>
     $('.disableCheckboxes input:checkbox').change(function () {
         $('.disableCheckboxes input:checkbox').not(this).prop('checked', false);
     })

     $(document).on("change", "input:checkbox:not(#langCheck)", function () {
         $('#langcheck input:checkbox').not(this).prop('checked', false);
     })
 </script>

But this leads to the behavior now that only ever one checkbox is checkable.

What I wanted is to either check the top checkbox (Sichtbar in allen SPrachen = all languages). This shall uncheck all below checkboxes (and it did already)

While if ANY of the checkboxes below (with the languages) is checked, it unchecks JUST the first checkbox. I am a bit confused over how to do this with jQuery still...

EDIT 2:

var selectCategory;
var inputSerch;

function checkedChanged() {
  alert("checkedChanged");
}

$(document).ready(function() {
  selectCategory = $('#idVideoCategory');
  inputSerch = $('#idSearch');

  selectCategory.on('change', function() {
    UpdateVideoList();
  });

  inputSerch.on('keypress', function(e) {
    if (e.which == 13) {
      UpdateVideoList();
      return false;
    }
  });

});

function UpdateVideoList() {

  var oContent = $('#idVideoList');
  var iCategory = selectCategory.val();
  var sSearch = inputSerch.val();

  var url = "/de/Administration/Video/GetVideoList"   "?id=895&categoryId="   iCategory   "&search="   sSearch;

  Base.Ajax.LoadInContent(url, oContent);
}



function RemoveSelectedVideo() {
  var url = "/de/Administration/Video/RemoveSelectedVideo"   "?videoId="   895;
  window.location.href = url;
  /*Base.Ajax.Request(url, function(result) 
  {
      UpdateVideoList();        
  }
  );*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <input id="langcheck" name="AllLangsChecked" type="checkbox" value="true"><input name="AllLangsChecked" type="hidden" value="false">
        <label>Sichtbar in allen Sprachen</label>
      </td>

    </tr>
    <tr>
      <td>
        <input id="checkLangs_0__Name" name="checkLangs[0].Name" type="hidden" value="English">
        <input id="checkLangs_0__LanguageId" name="checkLangs[0].LanguageId" type="hidden" value="1">
        <input checked="checked" id="checkLangs_0__isChecked" name="checkLangs[0].isChecked" type="checkbox" value="true" ><input name="checkLangs[0].isChecked" type="hidden" value="false">
        <label>English</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="checkLangs_1__Name" name="checkLangs[1].Name" type="hidden" value="Deutsch">
        <input id="checkLangs_1__LanguageId" name="checkLangs[1].LanguageId" type="hidden" value="2">
        <input checked="checked" id="checkLangs_1__isChecked" name="checkLangs[1].isChecked" type="checkbox" value="true" ><input name="checkLangs[1].isChecked" type="hidden" value="false">
        <label>Deutsch</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="checkLangs_2__Name" name="checkLangs[2].Name" type="hidden" value="Español">
        <input id="checkLangs_2__LanguageId" name="checkLangs[2].LanguageId" type="hidden" value="3">
        <input checked="checked" id="checkLangs_2__isChecked" name="checkLangs[2].isChecked" type="checkbox" value="true"><input name="checkLangs[2].isChecked" type="hidden" value="false">
        <label>Español</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="checkLangs_3__Name" name="checkLangs[3].Name" type="hidden" value="Français">
        <input id="checkLangs_3__LanguageId" name="checkLangs[3].LanguageId" type="hidden" value="4">
        <input checked="checked" id="checkLangs_3__isChecked" name="checkLangs[3].isChecked" type="checkbox" value="true"><input name="checkLangs[3].isChecked" type="hidden" value="false">
        <label>Français</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="checkLangs_4__Name" name="checkLangs[4].Name" type="hidden" value="Português">
        <input id="checkLangs_4__LanguageId" name="checkLangs[4].LanguageId" type="hidden" value="5">
        <input checked="checked" id="checkLangs_4__isChecked" name="checkLangs[4].isChecked" type="checkbox" value="true"><input name="checkLangs[4].isChecked" type="hidden" value="false">
        <label>Português</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="checkLangs_5__Name" name="checkLangs[5].Name" type="hidden" value="Pусский">
        <input id="checkLangs_5__LanguageId" name="checkLangs[5].LanguageId" type="hidden" value="6">
        <input id="checkLangs_5__isChecked" name="checkLangs[5].isChecked" type="checkbox" value="true"><input name="checkLangs[5].isChecked" type="hidden" value="false">
        <label>Pусский</label>
      </td>
    </tr>

  </tbody>
</table>

CodePudding user response：

The initial issue with your code of

$('#langcheck input:checkbox')

is because "selectorselector" is a child selector, which is not appropriate here as #langCheck is an input so does not have any child elements.

Giving each language checkbox the same class makes everything much easier:

<input  name="checkLangs[5].isChecked" type="checkbox" value="true">

these can then all be referenced/selected via the class and all changed in one go, eg:

$(".langCheck").prop("checked", true);

(with a change to the all to id=allLangCheck to distinguish it)

You then add a change event on "all" to change all and a change event on each of the others to change the "all".

Updated snippet:

$("#allLangCheck").on("change", function() {      
  $(".langCheck").prop("checked", $(this).prop("checked"));
});

$(".langCheck").on("change", function() {
  $("#allLangCheck").prop("checked", false);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <input id="allLangCheck" name="AllLangsChecked" type="checkbox" value="true">
        <input name="AllLangsChecked" type="hidden" value="false">
        <label>Sichtbar in allen Sprachen</label>
      </td>

    </tr>
    <tr>
      <td>
        <input id="checkLangs_0__Name" name="checkLangs[0].Name" type="hidden" value="English">
        <input id="checkLangs_0__LanguageId" name="checkLangs[0].LanguageId" type="hidden" value="1">
        <input checked="checked" id="checkLangs_0__isChecked" name="checkLangs[0].isChecked" type="checkbox" value="true" ><input name="checkLangs[0].isChecked" type="hidden" value="false">
        <label>English</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="checkLangs_1__Name" name="checkLangs[1].Name" type="hidden" value="Deutsch">
        <input id="checkLangs_1__LanguageId" name="checkLangs[1].LanguageId" type="hidden" value="2">
        <input checked="checked" id="checkLangs_1__isChecked" name="checkLangs[1].isChecked" type="checkbox" value="true" ><input name="checkLangs[1].isChecked" type="hidden" value="false">
        <label>Deutsch</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="checkLangs_2__Name" name="checkLangs[2].Name" type="hidden" value="Español">
        <input id="checkLangs_2__LanguageId" name="checkLangs[2].LanguageId" type="hidden" value="3">
        <input checked="checked" id="checkLangs_2__isChecked" name="checkLangs[2].isChecked" type="checkbox" value="true" class='langCheck'><input name="checkLangs[2].isChecked" type="hidden" value="false">
        <label>Español</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="checkLangs_3__Name" name="checkLangs[3].Name" type="hidden" value="Français">
        <input id="checkLangs_3__LanguageId" name="checkLangs[3].LanguageId" type="hidden" value="4">
        <input checked="checked" id="checkLangs_3__isChecked" name="checkLangs[3].isChecked" type="checkbox" value="true" class='langCheck'><input name="checkLangs[3].isChecked" type="hidden" value="false">
        <label>Français</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="checkLangs_4__Name" name="checkLangs[4].Name" type="hidden" value="Português">
        <input id="checkLangs_4__LanguageId" name="checkLangs[4].LanguageId" type="hidden" value="5">
        <input checked="checked" id="checkLangs_4__isChecked" name="checkLangs[4].isChecked" type="checkbox" value="true" class='langCheck'><input name="checkLangs[4].isChecked" type="hidden" value="false">
        <label>Português</label>
      </td>
    </tr>
    <tr>
      <td>
        <input id="checkLangs_5__Name" name="checkLangs[5].Name" type="hidden" value="Pусский">
        <input id="checkLangs_5__LanguageId" name="checkLangs[5].LanguageId" type="hidden" value="6">
        <input id="checkLangs_5__isChecked" name="checkLangs[5].isChecked" type="checkbox" value="true" class='langCheck'><input name="checkLangs[5].isChecked" type="hidden" value="false">
        <label>Pусский</label>
      </td>
    </tr>

  </tbody>
</table>