How to ensure a different option with different checkbox

问题

I need to find solution for my site. I have more checkbox option and depending on the checkbox I decide to check I would like to get different option from the script. For example, if I check the checkbox with the value 1, I would like to get the offer Ping. Can you please somebody help me with that how to write in in JavaScript or jQuery. Thank you so much!

    <div class="checkbox">
    <label>
    <input type="checkbox" value="1" onclick="call_the_script()">
    </label>
    <label>
    <input type="checkbox" value="2" onclick="">
    </label>
    <label>
    <input type="checkbox" value="3">
    </label>
    </div>

<div class="col-xs-10">
<input type="hidden" name="form_type" value="script">
<select id="option" class="form-control input-sm" name="option">

<option value="Ping">Ping</option>
<option value="Basic info">Basic info</option>
<option value="Restart modules">Restart modules</option>
</select>
</div>

To explain it better.. Thank you guys for your answers but to explain it I just made a live code in fiddle. Lets say I have this code http://jsfiddle.net/krizvite/t8k4fc11/` and I would like to make a script that will do this: If I check in the checkbox apple or blueberry I would like to choose only mash option. If I choose blackberry I want to choose crush method and for example if I use Orange I want to have bouth option. Can you please somebody help me with that?

回答1:

try this

$(function() {
  $("input[type='checkbox']").change(function() {
    // check if currently click was to make it checked
    if (this.checked) {
      // get value of current checkbox
      alert(this.value);
    }
  });
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <div class="checkbox">
    <label>first
      <input type="checkbox" value="1">
    </label>
    <label>second
      <input type="checkbox" value="2" onclick="">
    </label>
    <label>third
      <input type="checkbox" value="3">
    </label>
  </div>
</body>

</html>

alternate syntax $("input[type='checkbox']").on('click',function() {.... OR $("input[type='checkbox']").click(function() {....

回答2:

Try .change

e.g

$("#infos").change(function() {
    if(this.checked) {
        alert('infos is checked');
    }
});

回答3:

window.jQuery(document).ready(function() {
    $('body').on('change', "input[type='checkbox']", function() {
        if (this.checked) {
            // get value of current checkbox
            alert(this.value);
        }
    });
});

回答4:

I just tested and its worked now! my problem was solved with show(), hide() functions.

来源：https://stackoverflow.com/questions/34473403/how-to-ensure-a-different-option-with-different-checkbox

标签

javascript

jquery

checkbox

option