javascript - jQuery - Check and uncheck the 2nd checkbox when first clicked using name attribute - Stack Overflow

admin管理员组

文章数量:1384709

I am trying to check the 2nd checkobx (Delete it!) automatically, when first one (Hide it) is clicked? System generated html doesn't contain any id or class for the checkbox elements. I tried to target the name attribute, but it failed every time.

jQuery(document).ready(function($){
    $("input:checkbox[name='eddhd']").click(function() {
        $(this).parents('.eddhrd::nth-child(2))').siblings("input:checkbox[name='eddhrd']").find('input:checkbox').attr("checked","checked");
    });
});

<script src=".1.1/jquery.min.js"></script>
<fieldset class="es-el eddhd">
    <div class="es-label">
        <label for="es-eddhd">Hide it</label>
        <br>
    </div>
    <div class="es-fields">
        <span data-required="no" data-type="radio"></span>
        <label>
            <input name="eddhd[]" value="Yes" type="checkbox"> Yes
        </label>
    </div>
</fieldset>
<fieldset class="es-el eddhrd">
    <div class="es-label">
        <label for="es-eddhrd">Delete it!</label>
        <br>
    </div>
    <div class="es-fields">
        <span data-required="no" data-type="radio"></span>
    <label>
        <input name="eddhrd[]" value="Yes" type="checkbox"> Yes
    </label>
    </div>
</fieldset>

I am trying to check the 2nd checkobx (Delete it!) automatically, when first one (Hide it) is clicked? System generated html doesn't contain any id or class for the checkbox elements. I tried to target the name attribute, but it failed every time.

jQuery(document).ready(function($){
    $("input:checkbox[name='eddhd']").click(function() {
        $(this).parents('.eddhrd::nth-child(2))').siblings("input:checkbox[name='eddhrd']").find('input:checkbox').attr("checked","checked");
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="es-el eddhd">
    <div class="es-label">
        <label for="es-eddhd">Hide it</label>
        <br>
    </div>
    <div class="es-fields">
        <span data-required="no" data-type="radio"></span>
        <label>
            <input name="eddhd[]" value="Yes" type="checkbox"> Yes
        </label>
    </div>
</fieldset>
<fieldset class="es-el eddhrd">
    <div class="es-label">
        <label for="es-eddhrd">Delete it!</label>
        <br>
    </div>
    <div class="es-fields">
        <span data-required="no" data-type="radio"></span>
    <label>
        <input name="eddhrd[]" value="Yes" type="checkbox"> Yes
    </label>
    </div>
</fieldset>

• javascript
• jquery
• html
• checkbox

Share Improve this question Follow edited Aug 30, 2016 at 7:19 Sidharth Gusain 1,51111 gold badge1313 silver badges2020 bronze badges asked Aug 30, 2016 at 6:52 Kashif RafiqueKashif Rafique 1,28911 gold badge1212 silver badges2525 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You can use change function to check if checkbox is checked than check other checkbox otherwise uncheck it.

$("input:checkbox[name='eddhd[]']").change(function () {
if ($(this).is(":checked"))
   $("input:checkbox[name='eddhrd[]']").attr("checked", "checked");
else
   $("input:checkbox[name='eddhrd[]']").attr("checked", false);
});

Try following snippet.

$(document).ready(function($){
    $("input[name='eddhd[]']").change(function() {
        $("input[name='eddhrd[]']").prop("checked", $(this).is(":checked"));
    });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="es-el eddhd">
    <div class="es-label">
        <label for="es-eddhd">Hide it</label>
        <br>
    </div>
    <div class="es-fields">
        <span data-required="no" data-type="radio"></span>
        <label>
            <input name="eddhd[]" value="Yes" type="checkbox"> Yes
        </label>
    </div>
</fieldset>
<fieldset class="es-el eddhrd">
    <div class="es-label">
        <label for="es-eddhrd">Delete it!</label>
        <br>
    </div>
    <div class="es-fields">
        <span data-required="no" data-type="radio"></span>
    <label>
        <input name="eddhrd[]" value="Yes" type="checkbox"> Yes
    </label>
    </div>
</fieldset>

You need to traverse the DOM to find the checkbox from sibling of parent fieldset element then use .prop('property', value) to set the checked property.

$(document).ready(function($) {
  $("input[name='eddhd[]']").change(function() {
      $(this) //Referes to current element
        .closest('.eddhd') //Target parent fieldset with eddhd class
        .next('.eddhrd') //Target immediate sibling
        .find("input[name='eddhrd[]']") //Find the checkbox
        .prop("checked", this.checked); //set the checked property
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset class="es-el eddhd">
  <div class="es-label">
    <label for="es-eddhd">Hide it</label>
    <br>
  </div>
  <div class="es-fields">
    <span data-required="no" data-type="radio"></span>
    <label>
      <input name="eddhd[]" value="Yes" type="checkbox">Yes
    </label>
  </div>
</fieldset>
<fieldset class="es-el eddhrd">
  <div class="es-label">
    <label for="es-eddhrd">Delete it!</label>
    <br>
  </div>
  <div class="es-fields">
    <span data-required="no" data-type="radio"></span>
    <label>
      <input name="eddhrd[]" value="Yes" type="checkbox">Yes
    </label>
  </div>
</fieldset>

If I am right, you want to change the state of one checkbox on change on another checkbox. RIght?? Below is a sample code for checking 2nd checkbox on click of 1st checkbox.

$('.es-el.eddhd input[type=checkbox]').on('change', function() {
      $('.es-el.eddhrd input[type=checkbox]').attr('checked', 'checked');
})

try this

$("input:checkbox[name='eddhd[]']").on("click",function(){
       if($(this).prop("checked")){  
           $("input:checkbox[name='eddhrd[]']").prop("checked",true);
       } else{               
           $("input:checkbox[name='eddhrd[]']").prop("checked",false);
       }
    });

本文标签： javascriptjQueryCheck and uncheck the 2nd checkbox when first clicked using name attributeStack Overflow